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
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"
},
Am running Laravel Valet to host sites locally, and Laravel Mix to compile the assets and perform HMR using Webpack dev server
I secured the .dev site locally by
valet secure
No problem calling {{ mix('js/app.js') }} when running npm run watch
But whenever I want to take advantage of hot reloading by running the hot npm script, I get this
GET https://localhost:8080//css/app.css net::ERR_CERT_AUTHORITY_INVALID
GitHub issues suggested to add --https flag, I tried it and also --http
I even disabled host checks by --disable-host-check flag and cleared every possible cache and even tried a fresh git clone but to no avail
Here's my 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": "npm run development -- --watch",
"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 --https --disable-host-check --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"
},
"devDependencies": {
"#kazupon/vue-i18n-loader": "^0.3.0",
"cross-env": "^5.1",
"eslint-plugin-vue": "^5.2.3",
"laravel-mix": "^4.0.7",
"resolve-url-loader": "^2.3.1",
"sass": "^1.21.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"algoliasearch": "^3.33.0",
"axios": "^0.19.0",
"font-awesome": "^4.7.0",
"jquery": "^2.1.1",
"lato-webfont": "^2.15.1",
"modernizr": "^3.7.1",
"raleway-webfont": "^3.0.1",
"raphael": "^2.1.4",
"vlightbox": "^2.0.2",
"vue": "^2.5.17",
"vue-i18n": "^8.12.0",
"vue-instantsearch": "^2.2.1"
}
}
and webpack.mix.js if it's helpful
const mix = require('laravel-mix');
// Extend Mix with the "i18n" method, that loads the vue-i18n-loader
mix.extend('i18n', new class {
webpackRules() {
return [{
resourceQuery: /blockType=i18n/,
type: 'javascript/auto',
loader: '#kazupon/vue-i18n-loader',
}, ];
}
}(), );
// Call the .i18n() (to load the loader) before .js(..., ...)
mix.i18n()
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
What am I doing wrong? Can this be reproduced? should I find a way to secure localhost:8080 too?
So to get this working, instruct laravel mix to use specific domain and port for HMR in the options object
webpack.mix.js
// Get the APP_URL from .env and remove protocol
let url = process.env.APP_URL.replace(/(^\w+:|^)\/\//, '');
mix.options({
hmrOptions: {
host: url,
port: 8080 // Can't use 443 here because address already in use
}
});
Keep the --https flag to instruct webpack-dev-server as to what protocol to use, however, remove --disable-host-check because it's redundant (Google Chrome has a strict HSTS policy for .dev domains anyway)
Now given that valet secure generates SSL key and certificate for each domain, instruct webpack-dev-server to use them as well in the hot script of package.json
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js
--inline --hot --https
--key /home/caddy/.valet/Certificates/laravel.dev.key
--cert /home/caddy/.valet/Certificates/laravel.dev.crt --config=node_modules/laravel-mix/setup/webpack.config.js",
replace /home/caddy/ by your own absolute path
run
npm run hot
Now hot reloading is working fine with secured valet sites
Source
Had issues as of mix6. Here are the full steps to get it working in a fresh project.
Add the domain to your .env
APP_DOMAIN=example-app.test
Replace your scripts 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 --https",
"prod": "npm run production",
"production": "mix --production"
},
Edit your webpack.mix.js
const mix = require('laravel-mix');
const fs = require("fs");
const path = require("path");
const homeDir = process.env.HOME;
const host = process.env.APP_DOMAIN
mix
.options({
devServer: {
https: {
key: fs.readFileSync(path.resolve(homeDir, `.config/valet/Certificates/${host}.key`)).toString(),
cert: fs.readFileSync(path.resolve(homeDir, `.config/valet/Certificates/${host}.crt`)).toString(),
ca: fs.readFileSync(path.resolve(homeDir, `.config/valet/CA/LaravelValetCaSelfSigned.pem`)).toString(),
},
},
hmrOptions: {
host: host,
port: 8080
}
})
.js('resources/js/app.js', 'public/js')
Add the mixed JS to a blade view, plus a meta tag to automatically upgrade http requests to https
<head>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
...
</head>
<body class="antialiased">
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
Go to that blade view, open your browser's console, the app.js should STILL BE SSL erroring. Manually "open file in new tab", you should be taken to something like https://example-app.test:8080/js/app.js. Chrome will warn, you can accept the risk.
THEN go back to your regular view.
Things work.
Simply add the --https flag to your "hot" npm script. As long as you have a valid certificate for your Laravel backend in place, you should be good to go.
Webpack dev server takes care of the certificate generation for its server.
"scripts": {
"hot": "mix watch --hot --https",
...
},
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.
im looking to use the purifyCss of laravel-mix. The fuction is working fine on a brand new installation but when i try to upgrade from an older version of laravel-mix nothing happens and no errors are shown.
this is the currect package.json file
{
"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"
},
"devDependencies": {
"cross-env": "^5.1",
"laravel-mix": "^2.0",
"popper.js": "^1.13.0",
"purify-css": "^1.2.6",
"purifycss-webpack": "^0.7.0"
},
"dependencies": {
"bootstrap": "^4.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"normalize.css": "^8.0.0",
"velocity-animate": "^2.0.1"
}
}
this is my webpack.mix.js
let mix = require('laravel-mix');
mix.options({
purifyCss: true
});
//default path
mix.setPublicPath('website');
//index
mix.sass('resources/assets/sass/index/index-desktop.scss', 'css/index/index-desktop.min.css');
and this is a test blade file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ session('user.language_code') }}">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Caudex" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/index/index-desktop.min.css') }}">
</head>
<body>
</body>
</html>
Also im using yarn and when i try yarn run production the css is never removed.
The problem has been solved.
For anyone having the same problem check your class/id and be sure they dont have any numbers on it.
There are more than accepted answer in this issue:
Indeed there is an issue with class names. With no changes in the purifycss they should match /[a-z]+/
The build may work for you with run dev, but fail while run prod because of the issue in the 3rd party repository (2nd level dependency) which strikes when you're purifying the minified css files, like bootstrap 4 for example. You can find detailed explanation in PR, and track the issue.
For now you can use npm install git://github.com/alex7r/css.git#master (yes, I do prefer npm)
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 !