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:vue-loader@16.0.0-beta.7"

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! 🎉
Thank you so much for the quick response! ❤️

[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