I am facing an issue with my webpack configuration. I have placed my webpack.config.js and node_modules in a subfolder. When attempting to run the command npm run build, I encounter the following error:
ERROR in ../public/Vue/Components/Rating.vue Module not found: Error: Can't resolve 'vue'The folder structure of my project is as follows:
project/
+public/
Vue/
Components/
Rating.vue
main.js
Dist/
+webpack/
webpack.config.js
package.json
node_modules/
Here is my webpack.config.js setup:
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
]
},
....
}
In my main.js file, I import Vue and Rating component as follows:
import Vue from 'vue';
import Rating from "./Components/Rating.vue";
new Vue({
el: '#app',
data() {
return {
content: "Hello World",
}
},
components: {
Rating,
}
});
I would appreciate any help or guidance on resolving this issue :)
Error messages received:
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