Laravel Vue Error - You may need an appropriate loader to handle this file type

Vue is most popular mvc based javacript framework and mostly used with Laravel to create Single page application(SPA)

To create SPA by using Laravel+vue , please follow my other tutorials.

Issue:-
With the latest version of Laravel, when we run command "yarn watch # or npm run watch", we get below 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.

Solution:-
So to solve this issue follow below mentioned simple steps:-

Go to your project root directory and open webpack.mix.js

Now add ".vue()" before ".postCss()".

Your code will be look like below code or you can replace your file code with the below one.

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


mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Here we have add .vue() function because now with latest update, webpack configurations are changed so we need to make changes according to it.

Now run "yarn watch" command again and you will see error is gone and will see a screen like below screenshot.

Related Links

Laravel 8 webpack issue
Laravel 8 Vue js giving error of unhandled file type
How to solve "Module parse failed" error