Laravel-mix: Laravel Mix & Vue : Module parse failed: Unexpected token

[devhoussam]

Hi I want to use Vue 2 with laravel mix 6 but it didn't work it display this error message :

Module parse failed: Unexpected token

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'js')
   .vue({ version: 2 })
   .setPublicPath('public');

if (mix.inProduction()) {
    mix.version();
} 

package.json

"devDependencies": {
 ......
"laravel-mix": "^6.0.6",
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12"
 }

resources/js/app.js

require('./bootstrap');

import Vue from 'vue';
import App from './components/App.vue';

new Vue({
    el: '#app',
    components: { App }
});

resources/js/components/App.vue

<template>
    <div class="alert" v-text="message"></div>
</template>

<script>
export default {
    data() {
        return {
            message: 'I am an alert.'
        };
    }
};
</script>

<style>

</style

[truongnmt]

I have the same error

Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <div>
|         Hello 123123

[mishingo]

same

[brachycera]

I had similar problems upgrading Laravel-Mix.

package.json

   "laravel-mix": "^6.0.10",
   "vue-loader": "^15.9.6",
   "vue-template-compiler": "^2.6.12",
   "vue": "^2.6.12"

webpack.mix.js

mix.js('resources/js/app.js', 'public/js').vue({ version: 2 });

app.js

window.Vue = require('vue').default;

For me the information from this answer https://github.com/JeffreyWay/laravel-mix/issues/2747#issuecomment-755483920 fixed my problem

...import Vue as an ES6 module, or to add .default after the require....

Also the upgrade guide had some useful information - https://github.com/JeffreyWay/laravel-mix/blob/master/UPGRADE.md

Hope this might help :bowtie:

[5baddi]

Just add .vue({ version: 2 }) in webpack.mix.js
mix.js('resources/js/app.js', 'public/js').vue({ version: 2 });

[truongnmt]

@devhoussam above 2 answers should fix your problem. I think this issue could be closed

[devhoussam]

thank you you can closed

[JintoAntony]

I had similar problems upgrading Laravel-Mix.

package.json

   "laravel-mix": "^6.0.10",
   "vue-loader": "^15.9.6",
   "vue-template-compiler": "^2.6.12",
   "vue": "^2.6.12"

webpack.mix.js

mix.js('resources/js/app.js', 'public/js').vue({ version: 2 });

app.js

window.Vue = require('vue').default;

For me the information from this answer #2747 (comment) fixed my problem

...import Vue as an ES6 module, or to add .default after the require....

Also the upgrade guide had some useful information - https://github.com/JeffreyWay/laravel-mix/blob/master/UPGRADE.md

Hope this might help :bowtie:

This works fine

[33sKamal]

Thank you