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!
as your using laravel-mix 6 it have different config for 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', [
//
]);
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', [
//
]);
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;
here i do with the some problem
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
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..