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

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

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

always give examples to people DUDE

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.

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

The first link IS THE EXAMPLE, DUDE.

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:

  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.

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

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.

@Korijn Woohooo, that did the trick! 🎉 Thank you so much for the quick response! ❤️