13

I have my webpack.config.js and node_modules in a subfolder. If I trying to execute: npm run build I get the error: ERROR in ../public/Vue/Components/Rating.vue Module not found: Error: Can't resolve 'vue'. I think the path is incorrect, but i trying last 3 hours and i didn't find a solution.

the folder structure looks like:

project/
 +public/
    Vue/
      Components/
         Rating.vue
      main.js
    Dist/
 +webpack/
   webpack.config.js
   package.json
   node_modules/

webpack.config.js

var path = require('path');
var webpack = require('webpack');

var target = '../public/Vue/main.js';

var output = {
    path: path.resolve(__dirname, '../public/Dist/'),
    filename: 'default.js'
}


module.exports = {
  context: __dirname,
  entry: target,
  output: {
    path: output.path,
    filename: output.filename
  },

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },

module: {
    rules: [
      ... // load loader
    ]
  },
 ....
}

main.js

import Vue from 'vue';
import Rating from "./Components/Rating.vue";

new Vue({
  el: '#app',

  data() {
    return {
      content: "Hello World",
    }
  },

  components: {
    Rating,
  }
});

I hope somebody can me help out :)

Error message

ERROR in ../public/Vue/main.js
Module not found: Error: Can't resolve 'vue' in 'C:\xampp\htdocs\project\public\Vue'
 @ ../public/Vue/main.js 1:0-22


ERROR in ../public/Vue/Components/Rating.vue
Module not found: Error: Can't resolve 'vue-style-loader' in 'C:\xampp\htdocs\project\public\Vue\Components'
 @ ../public/Vue/Components/Rating.vue 2:2-297
 @ ../public/Vue/main.js
2

3 Answers 3

29

This question ranks high in google, so I would add a settings for Vue 3. With Webpack 5 and Vue 3, the webpack config alias changes to this:

resolve: {
    extensions: [ '.tsx', '.ts', '.js', '.vue' ],
    alias: {
        'vue': '@vue/runtime-dom'
    }
},

Alternatively this may be the solution, if the are transpilation errors:

    alias: {
        'Vue': 'vue/dist/vue.esm-bundler.js',
    }

Hope it saves time for others.

0
3

looks like something you might get when you don't run npm install

can you check that the vue folder exists in C:\xampp\htdocs\project\public\Vue\node_modules ?

1
  • I did have my node_modules folder with its tons of files, but nonetheless got the error in the OP. Following your advice, I ran npm install again, and it fixed it. Mar 28 at 7:45
0

This can also be the case when you migrate from vue2 to vue3 and forget to remove the alias when finished and removing @vue/compat helper migration build

chainWebpack(config) {
// helper to upgrade vue2 to vue3
config.resolve.alias.set('vue', '@vue/compat');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.