Assets compiling failed in Laravel 5.4 - node.js

While compiling assets in laravel throws error:
ERROR Failed to compile with 2 errors
error in ./resources/assets/sass/app.scss
Module build failed: Error: Missing binding /media/xxx/workspace/Projects/Laravel-blog/node_modules/node-sass/vendor/linux-ia32-57/binding.node
Node Sass could not find a binding for your current environment: Linux 32-bit with Node.js 8.x
Found bindings for the following environments:
- Linux 32-bit with Node.js 7.x
package.json
{
"private": true,
"scripts": {
"dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "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.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.4",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.5.2",
"webpack": "^3.8.1"
},
"dependencies": {
"bootstrap": "^3.3.7"
}
}
I think the problem is with environment binding as the error message shows.
And another thing to mention, if I compile only js file then its a successful build. And I tried npm rebuild node-sass but no help.
How can I fix the error?
Machine : Ubuntu 16.04
npm -v : 5.5.1
node -v : v8.6.0

The binding is searching for Node version 7 while you have version 8.
Try the following command:
npm rebuild node-sass

Related

npm install --production ignore my dependencies

I have this package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --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 --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 --progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"dependencies": {
"cross-env": "^7.0.3"
},
"devDependencies": {
"autoprefixer": "^10.2.6",
"axios": "^0.19",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.19",
"less": "^3.13.1",
"less-loader": "^7.3.0",
"lodash": "^4.17.21",
"resolve-url-loader": "^3.1.3",
"vue-template-compiler": "^2.6.14"
}
}
Just for testing how do work NodeJS, NPM, Laravel and Laravel Mix (Webpack) together, I run:
npm install --production (https://docs.npmjs.com/cli/v7/commands/npm-install)
With the --production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies.
Actual behavior
When I go to node_modules folder, I don't see any cross-env package there. Moreover the output of the command line is:
$ npm install --production
up to date, audited 1 package in 17s
found 0 vulnerabilities
, meaning no package (in particular: cross-env) was installed.
Expected behavior
cross-env (and only cross-env) would be installed, being part of dependencies, with this command: npm run install --production.
Question
Why does dependencies array seem to be ignored by NPM?
You have cross-env also listed in devDependencies. Dependencies should only be declared in one location. Perhaps npm ignored cross-env as it is listed in devDependencies.
I have found that this occurs even if the dependency is not explicitly listed twice in package.json but is a sub-dependency of a package declared in dependencies. My example:
{
"dependencies": {
"sharp": "^0.26.1" // depends on "color" which depends on "color-convert"
},
"devDependencies": {
"color-convert": "^2.0.1"
}
}
In this example, color-convert will NOT be installed if running npm install --only=production even though it is a dependency of a production dependency (using npm v6.14.14)

Laravel/Vue/Heroku - Skipping 'fsevents' build as platform linux is not supported

I've been trying to deploy a fresh Laravel with Vue in Heroku and this is the error that I got.
Skipping 'fsevents' build as platform linux is not supported
npm ERR! Cannot read property 'length' of undefined
...
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
Push rejected, failed to compile Node.js app.
Push failed
I have tried basic Heroku troubleshooting guide. Also, I manage to found this https://dev.to/saidichlil/comment/pn49 which doesn't seem to work base from the comment and still give it a shot and confirmed.
I am deploying from a github repo connected to heroku, by the way, and not by using Heroku CLI.
In your pacakge.json you'll want the engines declaration as #jake-price stated above and this post-build
"heroku-postbuild": "npm run production"
Also make sure your heroku/nodejs build pack is selected with the heroku/php buildpack
Your complete package.json may look something like this
{
"private": true,
"engines": {
"node": "12.x"
},
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --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 --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 --config=node_modules/laravel-mix/setup/webpack.config.js",
"heroku-postbuild": "npm run production"
},
"devDependencies": {
"#babel/preset-react": "^7.0.0",
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0"
}
}
Try and put what version of Node you want Heroku to use in your package.json
"engines": {
"node": "12.x"
}
If that doesn't work, you can also try and install it with the following command. This will skip the optional fsevents package (which isn't needed on Linux)
npm install --no-optional

Fresh Laravel Homestead 8.0.1: npm run dev fails to compile and npm ci fails to install. Something with cross-env?

I recently upgraded my Homestead from 6.3 to fresh Laravel Homestead 8.1.
I ssh'ed into the VM as usual to compile assets in my Laravel project via npm run dev and it started failing.
I was getting issue that Node Sass does not yet support your current environment (similar to this) but running:
sudo npm rebuild node-sass and npm uninstall --save node-sass and npm install --save node-sass didn't help.
When I completely remove node_modules via rm -rf node_modules or do npm ci it install stuff and fails at the end with:
No idea how to fix this. My node and npm versions are below:
node -v gives v12.7.0
npm -v gives 6.10.2
package.json is:
{
"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 --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",
"test": "cross-env NODE_ENV=test jest",
"tdd": "npm run test -- --watch --notify"
},
"devDependencies": {
"#coreui/coreui": "^2.0.4",
"#fortawesome/fontawesome-svg-core": "^1.2.2",
"#fortawesome/free-brands-svg-icons": "^5.2.0",
"#fortawesome/free-regular-svg-icons": "^5.2.0",
"#fortawesome/free-solid-svg-icons": "^5.2.0",
"#vue/test-utils": "^1.0.0-beta.10",
"axios": "^0.18",
"babel-jest": "^22.1.0",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jest": "^22.1.4",
"jest-vue-preprocessor": "^1.3.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"pace": "github:HubSpot/pace#v1.0.2",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.12.4",
"sweetalert2": "^7.0.7",
"vue": "^2.5.7"
},
"jest": {
"testURL": "http://localhost",
"roots": [
"<rootDir>/tests/Javascript/"
],
"moduleNameMapper": {
"^vue$": "vue/dist/vue.common.js"
},
"moduleFileExtensions": [
"js",
"vue"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
}
},
"dependencies": {
"bootstrap-datepicker": "^1.8.0",
"clipboard": "^2.0.4",
"datatables.net": "^1.10.19",
"datatables.net-bs4": "^1.10.19",
"datatables.net-scroller": "^2.0.0",
"debounce": "^1.2.0",
"jquery-datatables-checkboxes": "^1.2.11",
"owl.carousel": "^2.3.4",
"select2": "^4.0.6-rc.1"
}
}
Can somebody give me any hint? I'm happy to provide additional output from any logs if needed. I'm blocked by this one.
Full reset did the job:
rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install
then
npm run dev
I committed new package-lock.json into the repository. Can somebody at least explain what was the culprit?

Can't resolve 'promise/lib/es6-extensions.js' and 'promise/lib/rejection-tracking' when 'npm run'

I am taking over an existing project. Which is a web application project developed using Vue js. I am having problem with 'npm run dev'. Me and my friend are using the same laptop (Mac OSX) and we have the same node and npm versions (10.9.0 and 6.2.0). We both pull the code from the git repository, then we run "npm install". Then we run "npm run produciton" / "npm run dev". But the run command is working fine on my friend's machine and not throwing any error. But, I am getting this error.
ERROR Failed to compile with 2 errors 12:00:30
These dependencies were not found:
* promise/lib/es6-extensions.js in ./src/app.js
* promise/lib/rejection-tracking in ./src/app.js
To install them, you can run: npm install --save promise/lib/es6-extensions.js promise/lib/rejection-tracking
Asset Size Chunks Chunk Names
/cabs-app.js 2.08 MB 0 [emitted] [big] /cabs-app
ERROR in ./src/app.js
Module not found: Error: Can't resolve 'promise/lib/es6-extensions.js' in '/Users/wai/Desktop/'
# ./src/app.js 5:19-59
# multi ./src/app.js
ERROR in ./src/app.js
Module not found: Error: Can't resolve 'promise/lib/rejection-tracking' in '/Users/wai/Desktop/'
# ./src/app.js 4:2-43
# multi ./src/app.js
successfully deleted mix-manifest.json
As to solve the problem, I run this command.
npm install --save promise/lib/es6-extensions.js promise/lib/rejection-tracking
Then I got this error.
npm ERR! code ENOLOCAL
npm ERR! Could not install from "promise/lib/es6-extensions.js" as it does not contain a package.json file.
What is wrong, we are using same OS having same versions and node and npm. Why is it working on his machine and not on mine.
This is my package.json
{
"name": "xxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"cross-env": "^5.1.4",
"es6-promise": "^4.2.4",
"laravel-mix": "^2.1.10",
"lodash": "^4.17.5",
"moment": "^2.22.0",
"url-search-params": "^0.10.0",
"vue": "^2.5.16",
"vuex": "^3.0.1"
}
}
How can I solve this issue? I spent the whole morning finding the solution. Not working out.
Try this
npm install promise --save-dev
Make sure you included --save-dev
Still does not work?
remove/delete the node_modules folder and then run
npm install

npm doesn't install packages that listed in package.json file with Laravel/Homestead

I have an issue with "npm install" on my Laravel Homestead, and the problem is that npm doesn't install packages listed in package.json file like laravel-mix... etc.
I have installed last version of nodejs and npm on my homestead machine. This is 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 --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": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"popper.js": "^1.12",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"vue": "^2.5.7"
}
}
It's not a direct answer to your question, but I think you should be running npm install on your host machine, and not in the vagrant box.
The end result of running scripts defined in package.json is the compilation of js/css which will be consumed by the browser anyway - there should be no difference where you run them.
I was confused by this for a long time, and finally realized it makes no sense for Laravel projects to try and run npm scripts in Homestead. I posted a question about it here back in January, and started running npm scripts exclusively on host since then. And magically, almost all of my npm-related problems disappeared (this applies to both Windows 10, and Ubuntu 16.04 hosts).
As an added bonus, the scripts should execute faster from your host, since your skipping the unnecessary 'Vagrant layer'.

Resources