Laravel-mix: Module 'vue' can't resolved in app.js

[Psyphant]

• 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

[thecrypticace]

Does removing 'vue$': 'vue/dist/vue.esm.js', from your mix.alias call fix it?

[Psyphant]

Does removing 'vue$': 'vue/dist/vue.esm.js', from your mix.alias call fix it?

Yes it does. Argh, I missed this line. Thank you very much!

[devurandom]

I run into "Uncaught TypeError: Vue is not a constructor" with a very basic webpack.mix.js:

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .vue()
   .sass('resources/sass/app.scss', 'public/css');

and resources/js/app.js:

window.Vue = require('vue');
const app = new Vue({
    el: '#app',
});

https://github.com/vuejs-templates/webpack/issues/215 and https://stackoverflow.com/questions/42721133/use-webpack-with-vue-but-require-seems-not-working suggest I should add

resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
}

to my webpack config, while you suggest to remove that. Can you please clarify when it is necessary? How should I fix the TypeError properly?

[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

[devurandom]

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", [
]);

I believe this is the code I am using. (cf. https://github.com/JeffreyWay/laravel-mix/issues/2717#issuecomment-755563864)

1. run command - npm install vue-template-compiler vue-loader@^15.9.5 --save-dev --legacy-peer-deps

I ran this, but it changed virtually nothing in my yarn.lock -- the versions used are still the same and no package was added.

1. npm run watch
   And it will works

The build is successful. But in the browser I still see the TypeError.

[realtebo]

Did you find a solution. I've the same problem

[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!