After i run
php artisan ui vue --auth,
i am doing npm install without problem, but when i run npm run dev it show error like this
ERROR in ./resources/js/components/ExampleComponent.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 https://webpack.js.org/concepts#loaders
> <template>
| <div class="container">
| <div class="row justify-content-center">
webpack compiled with 1 error
how to solve that error?
As explained in the laravel mix documentation, in order to use Vue js, you must use the mix.vue() command in the webpack.mix.js file (in the root folder of your project).
For exemple this:
mix.js('resources/js/app.js', 'public/js').vue()
.sass("resources/scss/app.scss", "public/css");
instead of this:
mix.js('resources/js/app.js', 'public/js')
.sass("resources/scss/app.scss", "public/css");
I'm trying to import a node module in a custom module i'm creating in public folder.
What i'm doing in webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css')
.js('node_modules/normalize-wheel', 'public/assets')
.version();
In script file
import NormalizeWheel from '../normalize-wheel.js'
the error i'm getting
Uncaught SyntaxError: The requested module '../normalize-wheel.js' does not provide an export named 'default'
How can i import from node_modules folder correctly with laravel mix?
To anyone who has the same question/issue as me, i found an easy solution.
In your app.js file just do
window.NormalizeWheel = require('normalize-wheel');
Webpack via Laravel Mix bundles in up in one file /public/js/app.js which can be attached anywhere.
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
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
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..
after npm run prod for production in laravel, do I need to upload mix.manifest.json along app.css and app.js to shared hot or not?
the mix.manifest.json file will change to :
{
"/js/app.js": "/js/app.js?id=b891664151c01b268197",
"/css/app.css": "/css/app.css?id=4b5a5b36ae9495db0146"
}
but no such files in public, uploading just app.css and app.js is enough?
and is my code correct for versioning in production and development?
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
if (mix.inProduction()) {
mix.version();
}
You will also have to copy mix.manifest.json to your public folder along with app.css and app.js. Mix.manifest.json is where Laravel looks to get the version number. You will also have to change how you grab your css and js files in your app.blade.php so it looks like this:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
We made a little change on our Laravel project structuere. We made a file 'Larvel' inside the project. To make it work we changed the path in 'index.php' :
require __DIR__.'/laravel/vendor/autoload.php';
$app = require_once __DIR__.'/laravel/bootstrap/app.php';
So the Command php artisan serve isn't working. Due to this problem our vue component isn't updating.
We are running it on local server using xmapp
We want to keep the project structure as it is, and need a solution.
$npm run watch
$npm run watch --pull
$npm run dev
$npm run production
webpack.mix.js =>
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'public/css');
Main view file where all js & css files are linked in ->
master.blade.php
<script src="{{ asset('/') }}js/app.js"></script>
We expect if any changes we make in our vue component after running npm run watch then the update will show on our browser.
public/js/app.js has moved in root folder
You can use version.
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'public/css').version();
<script src="{{ mix('js/app.js') }}"></script>