Module 'vue' can't resolved in app.js

• Laravel Mix Version: 6.0.5
• Vue Version: 2.6.12
• Laravel/Lumen-Framework: 5.8
• Node Version: 15.4.0
• NPM Version: 7.0.15
• OS: Win10

Description:

I get the following error if I try to npx mix:

ERROR in ./resources/js/app.js 1:0-22
Module not found: Error: Can't resolve 'vue' in 'C:\myproject\resources\js'

ERROR in ./resources/js/store.js 1:0-22
Module not found: Error: Can't resolve 'vue' in 'C:\myproject\resources\js'

My webpack.mix.js look like this:

let mix = require('laravel-mix'),
    path = require('path');

mix.alias({
    'vue$': 'vue/dist/vue.esm.js',
    '@': path.resolve('resources'),
    'ext': path.resolve('node_modules'),
})

mix.vue({ version: 2, extractVueStyles: true });
mix.js('resources/js/app.js', 'dist')
mix.sass('resources/scss/app.scss', 'dist');

I just use the import statement in my app.js:

import Vue from 'vue';
import store from './store'

...

new Vue({
	router,
	store
}).$mount('#app');

Any Ideas? I used laravel-mix in version 2.0 before and it works.

Steps To Reproduce:

Just a npx mix… because I think I have a configuration problem. Btw.: If I try to use the LiveReloadPlugin it also drops the following error (maybe this info helps):

[webpack-cli] TypeError: compiler.plugin is not a function
    at LiveReloadPlugin.apply

[hbakouane]

@realtebo

• Go to your webpack.mix.js and add .vue() like that mix.js(‘resources/js/app.js’, ‘public/js’).vue() .postCss(‘resources/css/app.css’, ‘public/css’, [ // ]);
• after that run npm run watch and it will ask you to run a command, run it, and done!

[Paramount22]

You have to add .vue() to webpack.mix.js like this: mix.js(“resources/js/app.js”, “public/js”) .vue() .postCss(“resources/css/app.css”, “public/css”, [ ]);

1. run command - npm install vue-template-compiler vue-loader@^15.9.5 --save-dev --legacy-peer-deps
2. npm run watch And it will works