On a project using Laravel 5.4 and the new Laravel Mix, I have a weird error when pushing live a website.
When I'm in local, and I run the command npm run dev everything is working perfectly. dev is the following :
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
This command execute webpack (which I am not very familiar with) and convert sass, js, coffe, etc... to vanilla CSS and JS.
The problem is happening when live like I said when the command is npm run production. production is the following :
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
The traduction is happening correctly but when I go on the website I get the following error :
Uncaught ReferenceError: Invalid left-hand side expression in postfix operation
When I dig a little in the js I find this weird thing happening :
for(var n=t.length;0<n;0++)
So I have 0++ that would need to be n++ and when I make research on the file, I get 115 occurence of the 0++.
I think it is coming from webpack ? a misconfiguration or something ?
Thanks in advance for your help !
Related
I am trying to get Hot Module Replacement working with Laravel mix and Vagrant. My JS/CSS is compiled on the host machine and the website runs from a Vagrant box. I have followed the instructions here. I am running
npm run hot
on the host machine. When I change a JS/CSS file, the files are compiled. The correct url seems to be generated in the website. When I look in the page source I see:
<script src="//localhost:8080//js/min/myfile.min.js"></script>
This correctly returns the script (even though there are two slashes in there).. But HMR is still not working, and I get these errors in the console:
[WDS] Disconnected!
Invalid Host/Origin header
How can I get HMR working for Vagrant?
In the scripts section of package.json disable host checks for the hot script
"hot": "cross-env NODE_ENV=development
node_modules/webpack-dev-server/bin/webpack-dev-server.js
--inline --hot --disable-host-check
--config=node_modules/laravel-mix/setup/webpack.config.js",
Because the Laravel website is hosted on a different host and webpack dev server raises that security flag
I had problems when running npm run watch/npm run hot on the vagrant VM. Now, I run those commands on my machine directly.
https://laravel-mix.com/docs/6.0/hot-module-replacement
The webserver has the IP 192.168.10.10
and I use "laravel-mix": "^6.0.25".
In app.php:
#production
<script src="{{ asset('js/manifest.js') }}"></script>
<script src="{{ asset('js/vendor.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
#endproduction
#env('local')
<script src="http://localhost:8080/js/manifest.js"></script>
<script src="http://localhost:8080/js/vendor.js"></script>
<script src="http://localhost:8080/js/app.js"></script>
#endenv
And in package.json:
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
I have one laravel project where i'm going to have multiple backends, i need to do the same thing in frontend, another laravel project where i'm going to have multiple frontends in Vue using the laravel-vue integration, for example, inside resource/js folder to have frontend1, frontend2, etc. Is there any guide or tutorial about how to do this? How to make Folder structure inside resources/js, Laravel Mix configuration, etc.?
thanks!
I did this recently in a project where i created resources/backend/js and resources/frontend/js where i wanted the output to be in public/frontend and public/backend. I stumbled on some issues with the manifest file but got it working in the end.
You can do this by creating a new frontend.mix.js and change the output paths to
const mix = require('laravel-mix');
mix.setPublicPath('public/frontend')
.setResourceRoot('/frontend')
mix.js('resources/frontend/js/app.js', 'public/frontend/js')
.sass('resources/frontend/sass/app.scss', 'public/frontend/css')
You will need to create a few new command to use frontend.mix.js
"scripts": {
"frontend-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --env.mixfile=frontend.mix --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"frontend-watch": "npm run frontend-dev -- --watch",
}
Inside the original webpack.mix.js file i changed the paths to backend and left the commands untouched.
Hope this helps you.
I recently deployed my application to my server. I downloaded the deployed project from the server and set it up locally. I'm trying to build the frontend (Vue.js) with npm run dev, and It's giving me the following error.
95% emitting unnamed compat plugin.
I tried resetting my webpack.mix.js and it didn't help.
const mix = require('laravel-mix');
mix.js('resources/js/app.js', '../public/js')
.sass('resources/sass/app.scss', '../public/css')
.styles([
'resources/vendor/perfect-scrollbar/perfect-scrollbar.css',
'resources/vendor/select2/select2.min.css',
'resources/vendor/slick/slick.css',
'resources/vendor/css-hamburgers/hamburgers.min.css',
'resources/vendor/wow/animate.css',
'resources/vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css',
'resources/vendor/animsition/animsition.min.css',
'resources/vendor/bootstrap-4.1/bootstrap.min.css',
'resources/vendor/font-face.css',
'resources/vendor/theme.css'
], '../public/css/all.css');
When I run npm run dev this error occurs.
npm run watch
> # watch E:\xampp\htdocs\web\v1
> npm run development -- --watch
> # development E:\xampp\htdocs\web\v1
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"
10% building 1/1 modules 0 active
webpack is watching the files…
95% emitting unnamed compat plugin
If you want to generate files outside public folder, you have to use mix.setPublicPath(...) and then modify your assets output path.
Something like this:
const mix = require('laravel-mix');
mix.setPublicPath('../public');
mix.js('resources/js/app.js', 'js/')
.sass('resources/sass/app.scss', 'css/')
.styles([
'resources/vendor/perfect-scrollbar/perfect-scrollbar.css',
'resources/vendor/select2/select2.min.css',
'resources/vendor/slick/slick.css',
'resources/vendor/css-hamburgers/hamburgers.min.css',
'resources/vendor/wow/animate.css',
'resources/vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css',
'resources/vendor/animsition/animsition.min.css',
'resources/vendor/bootstrap-4.1/bootstrap.min.css',
'resources/vendor/font-face.css',
'resources/vendor/theme.css'
], 'css/all.css');
Hope it helps.
My Vue HOT MODULE REPLACEMENT (HMR) not working. What I have and what I do:
local server on http:\db7\ on port 80 on Windows 10 (xampp with php 7.2.6)
laravel latest version with composer install and npm install
next package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"live": "cross-env NODE_ENV=development webpack-dev-server --open --hot"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.1.1",
"cross-env": "^5.2.0",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.10",
"popper.js": "^1.14.3",
"vue": "^2.5.7"
},
"dependencies": {
"ajv": "^6.5.1",
"bootstrap-datepicker": "^1.8.0",
"js-cookie": "^2.2.0",
"moment": "^2.22.2",
"vue-flatpickr-component": "^7.0.4",
"vue-router": "^3.0.1",
"vue-snotify": "^3.1.0",
"vuex": "^3.0.1"
}
}
in laravel template (blade) I have <script src="{{ mix('js/app.js') }}"></script> and when I opening page and look page code I see <script src="//localhost:8080//js/app.js"></script>. When npm run hot I can see my js if open localhost:8080//js/app.js manualy from browser. I'm try write url manualy in template too - <script src="http://localhost:8080/js/bundle.js"></script>. The same result.
When npm run hot NOT runing netstat -ano | findstr 8080 in cmd clear - so, the 8080 port is not using. When npm run hotis runing - 8080 is LISTENING.
When I run npm run hot and reload page with appliccation in console no any messages like "HMR is running" and e.t.c.
When I do any changes in my Vue components I see, that "Compiled successfully" in my PHPStorm console, but in browser no any changes. And more - there are no any changes, if I reload page with ctrl+f5 or open page in chrome incognito mode. There are no any changes in app.js if I reopen localhost:8080//js/app.js in browser manualy too.
My webpack.mix.js in laravel root folder:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Step by step:
Install fresh laravel composer create-project --prefer-dist laravel/laravel blog
npm i
npm run dev
Open resources\views\welcome.blade.php remove all between <body></body> and add next (see on the bottom)
Check in chrome http://blog/public/. I can see 'Example Component'.
Open chrome DevTools on page and open console in it.
In cmd on project folder run npm run hot and wait for compiling
Hard reload page on chrome (ctrl+f5). In console I see only next. No HRM.
Try to change vue component. In resources\assets\js\components\ExampleComponent.vue add any symbol to html code in template and check chrome page - no any chages. Hard reload page - no any changes!
I do not do more than described above
Code for #4
<div id="app">
<example-component></example-component>
</div>
<script src="{{ mix('js/app.js') }}"></script>
Help my please!
It seems the hot module replacement functionality is currently bugged. This is a temporary workaround but this does not solve issues like CSS reloading:
https://github.com/JeffreyWay/laravel-mix/issues/1483#issuecomment-366685986
We will have to wait for a proper fix.
I've installed a fresh laravel app on my VPS and am trying to build it, but it hangs whenever webpack tries to build node_modules/vue/dist/vue.common.js.
Here's the output in the terminal (project name omitted):
root#driima:/var/www/html/PROJECT# npm run dev
> # dev /var/www/html/PROJECT
> node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules
10% building modules 8/9 modules 1 active ...T/node_modules/vue/dist/vue.common.js
And my package.json file:
{
"private": true,
"scripts": {
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules"
},
"devDependencies": {
"axios": "^0.15.2",
"laravel-mix": "^0.6.1",
"vue": "^2.0.1"
}
}
Could it be a file permissions issue? And if so, what should they be?
EDIT:
I have a file resources/assets/js/app.js which calls import './bootstrap';, and inside bootstrap.js is the following:
import Vue from 'vue';
import axios from 'axios';
window.Vue = Vue;
window.axios = axios;
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': window.Laravel.csrfToken,
'X-Requested-With': 'XMLHttpRequest'
};
It appears to be hanging when importing Vue, as when I skip importing my bootstrap file, everything compiles successfully.
Go ahead and update your deps. This was an issue caused by a minor patch from one of our webpack deps acorn. Since yesterday they have published a new patch fixing the issue.
Here's relevant issue: Webpack 2 hangs on all projects after update