problem with npm install - in laravel project - node.js

After running npm install I'm facing below error.
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm ERR! Unexpected end of JSON input while parsing near '....1","requirejs":"^2.1'
composer.json file
"php": "^7.2.5",
"fideloper/proxy": "^4.2",
"fruitcake/laravel-cors": "^1.0",
"guzzlehttp/guzzle": "^6.3",
"laravel/framework": "^7.0",
"laravel/tinker": "^2.0",
"laravel/ui": "^2.0"
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": "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 --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
}
}

Related

NPM Installation Failed With Laravel 8

I want to run npm run dev command on my Laravel 8 project, but I get this error:
[webpack-cli] Error: Unknown option '--hide-modules'
[webpack-cli] Run 'webpack --help' to see available commands and options
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpa
ck.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User 1\AppData\Roaming\npm-cache\_logs\2021-07-03T05_59_56_150Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User 1\AppData\Roaming\npm-cache\_logs\2021-07-03T05_59_56_264Z-debug.log
My package.json goes 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": "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": {
"#fortawesome/fontawesome-free": "^5.15.1",
"axios": "^0.21.1",
"bootstrap": "^4.5.2",
"jquery": "^3.5.1",
"laravel-mix": "^4.1.4",
"lodash": "^4.17.20",
"node-sass": "^4.14.1",
"popper.js": "^1.16.1",
"resolve-url-loader": "^2.3.1",
"sass": "^1.29.0",
"sass-loader": "^7.3.1",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.2",
"webpack-cli": "^4.7.2"
},
"dependencies": {
"#fancyapps/fancybox": "^3.5.7",
"#wiris/mathtype-tinymce5": "^7.24.1",
"bootstrap-fileinput": "^5.1.3",
"chosen-js": "^1.8.7",
"copy-to-clipboard": "^3.3.1",
"counterup2": "^1.0.4",
"croppie": "^2.6.5",
"font-awesome": "^4.7.0",
"highcharts": "^8.2.0",
"jquery-clock-timepicker": "^2.3.2",
"num2persian": "^3.2.2",
"production": "0.0.2",
"select2": "^4.0.13",
"simplebar": "^5.3.0",
"slick-carousel": "^1.8.1",
"sweetalert2": "^8.19.0",
"tinymce": "^5.5.1",
"tooltipster": "^4.2.8"
}
}
I tried deleting node_modules folder and again run the command npm install and npm run dev but didn't solve the issues.
At the very least, the latest version of Laravel 8 has a change to the scripts section in package.json to utilize the updated version of Laravel Mix.
Try this in your package.json.
{
"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": {
"#fancyapps/fancybox": "^3.5.7",
"#fortawesome/fontawesome-free": "^5.15.3",
"#wiris/mathtype-tinymce5": "^7.26.1",
"axios": "^0.21.1",
"bootstrap": "^5.0.2",
"bootstrap-fileinput": "^5.2.2",
"chosen-js": "^1.8.7",
"copy-to-clipboard": "^3.3.1",
"counterup2": "^1.0.4",
"croppie": "^2.6.5",
"highcharts": "^9.1.2",
"jquery": "^3.6.0",
"jquery-clock-timepicker": "^2.4.0",
"laravel-mix": "^6.0.25",
"lodash": "^4.17.21",
"node-sass": "^6.0.1",
"num2persian": "^3.2.2",
"popper.js": "^1.16.1",
"postcss-import": "^14.0.2",
"production": "0.0.2",
"resolve-url-loader": "^4.0.0",
"sass": "^1.35.1",
"sass-loader": "^12.1.0",
"select2": "^4.0.13",
"simplebar": "^5.3.4",
"slick-carousel": "^1.8.1",
"sweetalert2": "^11.0.18",
"tailwindcss": "^2.2.4",
"tinymce": "^5.8.2",
"tooltipster": "^4.2.8",
"vue": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.42.0",
"webpack-cli": "^4.7.2"
}
}
Frist new install npm.
npm install
Please run the command.
npm i vue-loader
Now this command run.
npm run dev

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?

NPM errors while installing

I get the following errors while installing npm:
npm WARN worker-loader#0.8.1 requires a peer of webpack#>=0.9 <2 || ^2.1.0-beta || ^2.2.0 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})**
Here 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": "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-sass": "^3.3.7",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
"dependencies": {
"latest-version": "^3.1.0",
"pdfjs-dist": "^1.9.528"
}
}
Versions: Windows 10, Node v8.4.0, Npm 5.3.0, Laravel: 4.4.
Firstly, these are just warnings, not errors - you've not broken anything!
That said, here's the reasoning behind them.
The first warning is telling you that worker-loader expects Webpack 2 to be installed alongside it. Laravel Mix uses Webpack 3, so you get a warning. That said, it shouldn't cause you any problems - worker-loader supports Webpack 3, they just haven't updated the peer dependency to reflect that yet.
The other warnings are very common - they're just telling you that the fsevents library, which is a Mac-only optional dependency of a lot of packages, couldn't be installed on your Windows machine.

Resources