I'm not sure if there is an issue here but it's been bothering me for a while. Whenever I'm using Laravel mix the various progress bars never complete and there are big gaps in the output, everything else appears to function correctly but it's just starting to annoy me a little as I'm wondering if something isn't setup quite right, the progress bars always seem to stall at the same point. I've attached an image from vscode console, is this normal? I've also made a stripped back example to test.
package.json
{
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch"
},
"devDependencies": {
"laravel-mix": "^6.0.43",
"sass": "^1.51.0",
"sass-loader": "^12.6.0"
}
}
webpack.mix.js
const mix = require('laravel-mix');
mix
.setPublicPath('dist')
.js('src/app.js', 'dist')
.sass('src/app.scss', 'dist').options({
processCssUrls: false,
});
Win 10 WSL
Node: 16.15.0
NPM: 8.5.5
Looking over some similar issues, this seems to be caused by symlinks. Does WSL use symlinks for anything?
Thanks!
Related
Before upgrade to Laravel-Mix 6:
Laravel-Mix version: 5.0.9 (supports Webpack 4)
NPM version: 6.14.5
With this laravel mix version I was able to pass in environment variables to webpack.mix.js by running the npm scripts defined in package.json:
"dev": "cross-env NODE_ENV=development ENV_FILE=./.env.local node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
...
"production": "cross-env NODE_ENV=production ENV_FILE=./.env.production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
Then I could access the variable in webpack.mix.js, whose value depends on whether I was running on production or development mode:
let mix = require("laravel-mix");
mix.env(process.env.ENV_FILE);
This worked fine!
After upgrade to Laravel-Mix 6:
Laravel Mix version: 6.0.19 (Webpack 5 supported)
NPM version: 6.14.5
I followed the recommendations from the laravel documentation including the update of the npm scripts...
Following the instructions on the documentation how to pass in environment variables to Webpack CLI (please refer to https://laravel-mix.com/docs/6.0/cli#pass-options-to-webpack-cli), the npm scripts where then changed as follows:
"dev": "mix -- --env ENV_FILE=./.env.local",
"production": "mix --production -- --env ENV_FILE=./.env.production"
The problem is, that I cannot access the environment variable in webpack.mix.js anymore via process.env.ENV_FILE. Its value is undefined...
I already checked out in node_modules/laravel-mix/setup/webpack.config.js through console.log, that the variable indeed was passed in:
const { assertSupportedNodeVersion } = require('../src/Engine');
module.exports = async (config) => {
assertSupportedNodeVersion();
console.log("ENV_FILE: ", config.ENV_FILE);
const mix = require('../src/Mix').primary;
require(mix.paths.mix());
await mix.installDependencies();
await mix.init();
return mix.build();
};
And by running for instance npm run dev I can see the value logged out:
mix -- --env ENV_FILE=./.env.local
ENV_FILE: ./.env.local
So the question is, why I cannot access the environment variable in webpack.mix.js, and more importantly, how can I do it.
Thanks in advance for the help!
Laravel Mix 6 / Customize the Mix Configuration Path
There is no need to pass settings via env params anymore - simply specify different webpack.mix.js files for each script variation using --mix-config option and incorporate any additional settings (statically) into these:
"dev": "mix --mix-config=webpack.mix.dev.js",
"production": "mix --mix-config=webpack.mix.prod.js --production"
etc. Of course you can then still require a common webpack.mix.js containing the actual mix logic.
I'm new to shared hosting deployment and I need help to deploy an app on a shared hosting server that uses CPanel.
I have deployed thee same app before on a CPanel shared hosting, by zipping my files and uploading them to the subdomain. But as far as I am concerned, that is very wrong since all my development files are exposed to anybody
Second time I tried, I copied the files from the git repo via SSH, and the installing composer, but when I try to install node to use npm and run the command npm install and npm run dev. Surprise! I had errors such as Javascript heap out of memory Zone allocation failed and Aborted.
So I would like to know:
How to install properly node dependencies from a laravel package.json file on CPanel, without breaking down the server or misconfiguring something
Any help would be very appreciated. I there's a way to granmt or reward anyone here, I would like you to show me how.
I have to get this working before next saturday, therefore any help would be very nice.
This is my package.json, just in case you need it:
{
"private": true,
"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"
},
"devDependencies": {
"#tailwindcss/custom-forms": "^0.2.1",
"#tailwindcss/forms": "^0.2.1",
"#tailwindcss/typography": "^0.3.0",
"alpinejs": "^2.7.3",
"autoprefixer": "^10.0.2",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"laravel-mix-merge-manifest": "^2.0.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.1"
},
"dependencies": {
"sweetalert2": "^10.16.0"
}
}
Thanks in advance.
So what happened here, is that I had to delete all node_modules folder. Then, I ran npm update --legacy-peer-deps command in order to have all packages according to the package.json file. After that, I could run
node_modules/.bin/webpack --config=node_modules/laravel-mix/setup/webpack.config.js
without further complications.
I've seen this question being answered a couple of times on the net. However, I'm just not getting it to work. I hope you can help.
I'm using Laravel 5.5 with Laravel Mix. Instead of manually loading some of my needed js files into the specific directories, I want to install the packages via npm and require them in laravel mix.
This works with bootstrap out of the box. I swapped the 3.3.7 version for the 4.0.0 alpha6.
npm install bootstrap-v4-dev -D
Then in resources/assets/js/bootstrap.js I changed it to look like this
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-v4-dev');
} catch (e) {}
and it works. I can run npm run dev just fine. Now, I want to do the exact same thing with another npm package. So I do npm install now-ui-kit -D my package.json now looks like this
{
"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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap-v4-dev": "^4.0.0-alpha.6",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"now-ui-kit": "^1.0.1",
"popper.js": "^1.11.1",
"vue": "^2.1.10"
},
"dependencies": {
"now-ui-kit": "^1.0.1"
}
}
Then in the bootstrap.js file, I add require('now-ui-kit');, but now when I try to compile, I get the following error:
ERROR in ./resources/assets/js/bootstrap.js
Module not found: Error: Can't resolve 'now-ui-kit' in '/home/vagrant/code/user/resources/assets/js'
# ./resources/assets/js/bootstrap.js 15:0-21
# ./resources/assets/js/app.js
# multi ./resources/assets/js/app.js
I also tried placing the require('now-ui-kit'); in app.js or even in webpack.mix.js..
Nothing worked, and I really don't get what I'm doing wrong.. Could someone help?
Follow these steps:
Install npm package let install jQuery npm i jquery.
Create a .js file say resources/js/package.js
Now open webpack.mix.js add package.js in webpack.mix.js
mix.js([
'resources/js/package.js',
'resources/js/otherJsFile.js'
], 'js/app.js').extract([
// Extract packages from node_modules to vendor.js
'jquery'
])
Write this in resources/js/package.js :
import $ from 'jquery';
Finally use js/vendor.js, js/app.js on .blade file.
Now you can jQuery on your website imported from node_modules
I recently switched to laravel 5.4.
When i tried to run npm run watch I get the following error --
I didn't even done any edit in my sass file.
Sass File looks like this ---
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
How can i solve this?
My package.json file looks like this --
{
"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 --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"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 --config=node_modules/laravel-mix/setup/webpack.config.js",
"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"
},
"devDependencies": {
"axios": "^0.15.2",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.0",
"laravel-mix": "^0.5.0",
"less": "^2.7.2",
"less-loader": "^2.2.3",
"lodash": "^4.16.2",
"vue": "^2.0.1"
}
}
This is a current issue with Laravel Mix. There is an open issue discussion on GitHub for this.
https://github.com/JeffreyWay/laravel-mix/issues/200
According to the some of the users you could use Laravel Mix version 0.5.8 and your problem would go away. Edit your package.json file to have "laravel-mix": "0.5.8"
I recommend using this until the issue is resolved.
This seems to be an issue for windows users.
Edit
As of this moment the issues seems to have been resolved. You need to pull in the latest version of Mix and also add "vue-loader": "10.1.0" to your package.json file.
Make sure you have sass installed on your computer. If you don't have it installed, instructions are here: http://sass-lang.com/install.
Then you need to make sure sass is also installed in the project. Reading your package.json it seems you have less instead.
Run: npm i --save-dev sass
By default your project comes with less installed. Locate the file webpack.mix.js from the root folder. find the following line
mix.less('resources/assets/less/app.less', 'public/css')
.less('resources/assets/less/admin.less', 'public/css');
And change it to
mix.sass('resources/assets/sass/app.sass', 'public/css')
.sass('resources/assets/sass/admin.sass', 'public/css/admin');
If you don't see those exact same lines, find something similar.
Im using laravel homestead 0.5.0, I have a fresh install laravel but whenever i try to do npm install--no-bin-links or npm install on the VM or on Powershell or CMD it always give an error.
Maximum call stack size exceeded. windows max path length i guess? anything I can do to avoid this? heres my package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"bootstrap-sass": "^3.3.0"
}
}
im using windows 8.1 and virtual box 5
node version is 5.12.0
npm version is 3.10.5
any help is appreciated thanks
screenshot of the error