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

[andyghiuta]

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"
  }

[janriemer]

Same problem for me. I use TypeScript instead of babel, though.

This dependency was not found:

* @vue/server-renderer in ./node_modules/vue-loader-v16/dist/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/app/HelloWorld.vue?vue&type=template&id=812b7072&scoped=true&bindings={}

[Korijn]

Temporary workaround is to pin vue-loader-v16 to beta 7 in your package.json, like so:

"vue-loader-v16": "npm:[email protected]"

I use practically the same setup with cucumber-js instead of mocha (using a custom vue-cli plugin) and encountered exactly the same issue.

[janriemer]

@Korijn Woohooo, that did the trick! :tada:
Thank you so much for the quick response! :heart:

[damianof]

I started experiencing this issue to yesterday, but the fix suggested by @Korijn does not seem to make a difference for me. (I am also using TypeScript)

Corrected: The fix actually worked after deleting package-lock.json and node_modules and doing npm install again. Thank you @Korijn

[Korijn]

I started experiencing this issue to yesterday, but the fix suggested by @Korijn does not seem to make a difference for me. (I am also using TypeScript)

You applied the workaround correctly (judging from your package-lock.json). It must be related to your use of typescript then I guess.

Sorry, I can't help you with that.

[damianof]

I started experiencing this issue to yesterday, but the fix suggested by @Korijn does not seem to make a difference for me. (I am also using TypeScript)

You applied the workaround correctly (judging from your package-lock.json). It must be related to your use of typescript then I guess.

Sorry, I can't help you with that.

I updated my comment above. Thank you again.

[creynir]

Any workaround on this one? I'm getting this issue on new project created with latest vue-cli. I see vue-loader v15.9.5 and vue-loader-v16 v16.0.0-rc.2 in my node_modules for some reason

[sodatea]

See https://github.com/vuejs/vue-cli/pull/6097
Use vue-loader 16.1.0+ and explicitly disable the isServerBuild option.

Note: the given reproduction project still fails because of another long-standing issue with project names starting with vue-loader 😂 https://github.com/vuejs/vue-loader/commit/99a519628b852a01c2760049b33009e37eb275f5

[iXmonvi33]

but where to set isServerBuild ?!?!

[iXmonvi33]

always give examples to people DUDE

[sodatea]

The first link IS THE EXAMPLE, DUDE.

[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]

@Sergej-Popov The .loader line is extraneous and may cause errors under some circumstances.

[Sergej-Popov]

@sodatea Not saying you are wrong, but that's how documentation suggests doing it.
https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader

[sodatea]

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

[va-living-moosebrook]

Just to clarify for anyone coming across this as this is a confusing thread and the info scattered elsewhere on SO and in other vue projects wasn't clear.

For a Vue 3 CLI app configured to use typescript and mocha / chai all I had to do was add a vue.config.js file (there wasn't one by default) to the root of my project and have the following in that file:
module.exports = { chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .tap(options => { options.isServerBuild = false; return options; }); } };

For good measure I removed my package-lock.json and my node_modules directories and ran npm install again. I'm not 100% sure that step was required as I was doing a bunch of variants but it doesn't hurt and likely could clear up other dependency problems..
Now I can safely run npm run test:unit and don't get any errors. Note I didn't update my package.json to pin the vue-template-compiler as it wasn't necessary if you add the vue.config.js file.