Module not found: '@vue/server-renderer' error with Vue test utils (Mocha Chai)

Version

16.0.0-beta.8

Reproduction link

https://github.com/andyghiuta/vue-loader-server-renderer-issue

Steps to reproduce

npm run test:unit

What is expected?

Tests to complete (fail or pass)

What is actually happening?

Tests fail:

vue-cli-service test:unit

 WEBPACK  Compiling...

  [=========================] 98% (after emitting)

 ERROR  Failed to compile with 1 errors

This dependency was not found:

* @vue/server-renderer in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/HelloWorld.vue?vue&type=template&id=469af010&scoped=true&bindings={"msg":"props"}

To install it, you can run: npm install --save @vue/server-renderer
  [=========================] 100% (completed)

 WEBPACK  Failed to compile with 1 error(s)

Error in ./src/components/HelloWorld.vue?vue&type=template&id=469af010&scoped=true&bindings={"msg":"props"}

  Module not found: '@vue/server-renderer' in 'D:\work\www\node\hello-vue3-cli\src\components'

 ERROR  mochapack exited with code 1.

---

This is a brand new scaffolded app, no extras.

(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
>(*) Unit Testing
 ( ) E2E Testing

Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

Deps:

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-unit-mocha": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "chai": "^4.1.2",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0"
  }

[Sergej-Popov]

Here is a more down to earth example for the rest of us who use less sophisticated webpack config. Goes to vue.config.js as per https://cli.vuejs.org/guide/webpack.html

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.isServerBuild = false
        return options
      })
  }
}

[sodatea]

Oops. No wonder it’s used in so many places! I think we need to update the documentation.