Module not found: Error: Can't resolve vue, path not correct

Question

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

Or make sure there's a configuration that tells npm where to install modules — Emile Bergeron
– Emile Bergeron, Commented Jun 12, 2018 at 1:12

Peter Matisko · Accepted Answer · 2021-01-16 16:19:16Z

31

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.

edited Jan 16, 2021 at 16:19

answered Dec 11, 2020 at 10:25

Peter Matisko

2,2831 gold badge28 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel · Accepted Answer · 2018-06-11 21:19:51Z

4

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 ?

answered Jun 11, 2018 at 21:19

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

1 Comment

Fry Simpson Over a year ago

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.

SuperTed · Accepted Answer · 2023-11-23 07:58:07Z

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');

answered Nov 23, 2023 at 7:58

SuperTed

3212 silver badges5 bronze badges

Collectives™ on Stack Overflow

Module not found: Error: Can't resolve vue, path not correct

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related