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! 

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