How to fix the error "You may need an appropriate loader to handle this file type"

Question

I have a fresh Laravel installation. On compiling files using npm run dev VUE I get a file error

"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"

Laravel Verion: "^8.12"

Package.json

 "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.10"
    }

blade file

 <div id="app">
        <hello></hello>
    </div>
    <script src="{{mix('js/app.js')}}"></script>

app.js

require('./bootstrap');
import  Vue from  'vue'    
Vue.component('hello', require('./hello.vue').default);
const app = new Vue({
    el: '#app'
});

Hello.vue

<template>
    <div>
        Hello World!
    </div>
</template>
<script>
export default {

}
</script>

npm run dev

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

Slopwork

@KamleshPaul npm run dev – Slopwork

@KamleshPaul same error with Captal. ERROR in ./resources/js/vue/components/Hello.vue 1:0 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 webpack.js.org/concepts#loaders > <template> | <div> | Hello World! – Slopwork

@KamleshPaul these commands use. npm i vue -D . npm i vue-loader -D . npm i vue-template-compiler -D.then npm install. then for compiling the file npm run dev. "postcss": "^8.1.14"` it seems missing.i'm not using postcss.in webpack.mix.js only this line.i've remoed for postcss.mix.js('resources/js/app.js', 'public/js'); – Slopwork

@KamleshPaul after install "postcss": "^8.2.2". same error.. – Slopwork

Answer 1

as your using laravel-mix 6 it have different config for webpack.mix.js

webpack.mix.js

use .vue()

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

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

ref link https://laravel-mix.com/docs/6.0/upgrade

Marchelle

Thanx bro .mix.js('resources/js/app.js', 'public/js').vue(); slove the issue – Slopwork

i can't because of point less than < 15,will do in future. – Slopwork

And how do I refresh the settings of my project so that it applies the change? – Cordalia

Do you know any way to use this and also add scss? – Pak

It works, I tried differently but this is the only solution that works for me. – Muscolo

Thank you for this. Laravel Nova does not document this anywhere. – Zerline

It worked for me! Thank you. In addition to adding .vue(), when trying to run the command mix watch --hot in the terminal, the following message was displayed: "dditional dependencies must be installed. This will only take a moment. Running: npm install vue-template-compiler vue-loader@^15.9.7 --save-dev --legacy-peer-deps Finished. Please run Mix again." After running this command, I was able to compile mix successfully. – Selfsupporting

There is a way for @vue/cli 4.5.13? in my case returns me with /echarts/lib/chart/sunburst/SunburstPiece.js – Pierpont

In a simple Vue development environment without Laravel, I've used ".vue()" as below. It works fine & saved my time. mix.js('src/app.js', 'dist').sass('src/app.scss', 'dist').vue(); – Hurry

Answer 2

If anyone still encounters this issue, here how I figure out the cause in my case and it's actually a Laravel mix 6 configuration issue for Vue support.

You can check the documentation for more details : Laravel mix 6 upgrade documentation

But let me explain it in short here...

I was using Laravel mix 6 (you may probably use the same if you created a fresh Laravel 8 project) and according to its official documentation "Laravel Mix 6 ships with support for the latest versions of numerous dependencies, including webpack 5, PostCSS 8, Vue Loader 16, and more". So no need for you to add vue loader although the error states it.

You rather need to tell explicitly Laravel mix 6 to support vue, here what they say "Laravel Mix was originally built to be quite opinionated. One of these opinions was that Vue support should be provided out of the box. Any call to mix.js() would instantly come with the benefit of Vue single-file components.

Though we're not removing Vue support by any stretch, we have extracted Vue to its own "featured flag": mix.vue().

Here what I did.

First option

// You can simply use this
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
        //
]);

Second option

// Or this if you want to extract styles as well
// Feel free to check the documentation for more customisations
mix.js('resources/js/app.js', 'public/js')
.vue({
    extractStyles: true,
    globalStyles: false
})
.postCss('resources/css/app.css', 'public/css', [
        //
]);

Gunstock

Do you know any way to use this and also add scss? – Pak

This saves my life! – Becalmed

Answer 3

here i do with the some problem

mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();

Fezzan

Answer 4

First of all, thanks to Paul for this clarification which saved my evening :)

After that the compilation worked for me, but an error appeared in the console when I reloaded the page:

Vue.use is not a function

For those who would be in the same case, in your app.js file, you must replace the line :

window.Vue = require('vue');

With :

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

Strophe

Answer 5

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

Or

npm install vue-template-compiler vue-loader@^15.9.7 --save-dev --legacy-peer-deps

try both..

Herbertherbicide