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

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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 19

Most upvoted comments

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

+91

5baddi on Jan 24, 2021

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:

+39

brachycera on Jan 21, 2021

add .vue() on webpack.mix.js file after mix.js()

mix.js(‘resources/js/app.js’, ‘public/js’) .vue() .postCss(‘resources/css/app.css’, ‘public/css’, [ require(‘postcss-import’), require(‘tailwindcss’), ]);

and Then run

npm install vue-resource npm i vue-loader npm install vue-template-compiler npm install vue-router

hope it will work

mamunsabuj on Oct 23, 2021

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

JintoAntony on Mar 20, 2021

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 After these changes, if you still get error, run npm install again and then npm run dev

hammadshahir on May 31, 2021

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

truongnmt on Jan 25, 2021

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

truongnmt on Jan 12, 2021

Needed

mix.webpackConfig({
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js' 

    }
  }
})

in webpack.mix.js in our case running Vue 2.6.14 using vue.common.js which is the full version (compiler and runtime). The CommonJS builds are often used with older bundlers. See Vue Docs Terms .

We are using Webpack 5 now, but it seems we need this setup. Also see https://github.com/vuejs-templates/webpack/issues/215 with mention on runtimes

jasperf on Nov 2, 2021