npm install causes error in fresh laravel 7 project - npm

I have installed a Laravel 7.29 framework using composer. After that when I try to install node packages using npm install, I get the following 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 '...lus-loader":"^1.4.0",'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Roaming\npm-cache\_logs\2020-12-08T12_58_03_608Z-debug.log
Here is my packages.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 --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0"
}
}
What is the problem with my fresh Laravel project?

Related

Can't execute npm install

When I am executing npm install this error shows. Any advice about this?
PS C:\Users\alex\Downloads\team> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: frontend#0.0.0
npm ERR! Found: #angular/compiler#13.1.3
npm ERR! node_modules/#angular/compiler
npm ERR! #angular/compiler#"~13.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/compiler#"13.0.3" from #angular/compiler-cli#13.0.3
npm ERR! node_modules/#angular/compiler-cli
npm ERR! dev #angular/compiler-cli#"~13.0.0" from the root project
npm ERR! peer #angular/compiler-cli#"^13.0.0" from #angular-devkit/build-angular#13.2.2
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"^13.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! See C:\Users\ for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\
Here is Package.json file:
{
"name": "frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular-devkit/build-angular": "^13.1.0",
"#angular/cdk": "^13.1.0",
"#angular/common": "~13.1.0",
"#angular/compiler": "~13.1.0",
"#angular/core": "~13.1.0",
"#angular/forms": "~13.1.0",
"#angular/platform-browser": "~13.1.0",
"#angular/platform-browser-dynamic": "~13.1.0",
"#angular/router": "~13.1.0",
"#types/jquery": "^3.5.13",
"bootstrap": "^5.1.3",
"bootstrap4-toggle": "^3.6.1",
"colors": "^1.4.0",
"jquery": "^3.6.0",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.2.0",
"#angular/cli": "~13.0.4",
"#angular/compiler-cli": "~13.0.0",
"#types/jasmine": "~3.10.0",
"#types/node": "^12.11.1",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.4.3"
}
}
ERESOLVE issues with npm#7 and npm#8 are common because they are more strict about peer dependencies than npm#6. Often, the easiest resolution is to pass the --legacy-peer-deps flag to npm (e.g., npm i --legacy-peer-deps) or else use npm#6.
The "correct" solution is to figure out which of your dependencies need to be updated in package.json to avoid the peer dependency conflict, but that is sometimes not possible with dependencies that are unmaintained. In that case, the solution is to find or create something else to get rid of the unmaintained dependency.
However, 9 times out of 10, someone just wants to get the stuff installed and hope it works, in which case --legacy-peer-deps will do that. Just make sure you have good test coverage because you're using a different peer dependency version than that specified by a package so something somewhere might not work.
To see if the problem will affect your production app, do npm install --production. If it doesn't give you an ERESOLVE error, then the problem is in your dev dependencies only, which is less of a concern typically.

webpack-cli Invalid configuration object

I have laravel 5.8 installed and I want to use vue in it. I tried running following commands.
I am running it on ubuntu, node version is 10.19.
1. npm install
2. npm run watch
First command runs okay and gave some warnings. When I run npm run watch I get following errors.
I am kind of new so any help is appreciated.
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.module.rules[10] has an unknown property 'loaders'. These properties are valid:
object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }
-> A rule description with conditions and effects for modules.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"`
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! /home/admin/.npm/_logs/2021-12-07T09_49_10_144Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # watch: `npm run development -- --watch`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # watch script.
npm ERR! This is probably not a problem with npm.
My package.json is as follows
{
"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 --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"
},
"devDependencies": {
"axios": "^0.24.0",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.1.4",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.0",
"sass": "^1.44.0",
"sass-loader": "^7.3.1",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
},
"dependencies": {}
}
Installing "webpack": "^5.41.1" with npm i -S webpack#latest will fix this issue.

vue-cli-service#latest' is not in the npm registry on Windows. Works in WSL

I have a Vue app which I am trying to run using npm run start, but this gives me the following error when I run the command from either PowerShell or inside the VS Code terminal:
> economyapp#0.1.0 start C:\_code\myapp
> npx vue-cli-service serve
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/vue-cli-service - Not found
npm ERR! 404
npm ERR! 404 'vue-cli-service#latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Roaming\npm-cache\_logs\2020-11-28T17_22_02_307Z-debug.log
Install for [ 'vue-cli-service#latest' ] failed with code 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! economyapp#0.1.0 start: `npx vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the economyapp#0.1.0 start 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\AppData\Roaming\npm-cache\_logs\2020-11-28T17_22_02_401Z-debug.log
The npm run start command works when I run it from inside WSL, however the server does not hot reload when I make changes to the code. I have tried uninstalling and reinstalling Vue CLI and running npm install.
Here is my package.json:
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "npx vue-cli-service serve",
"build": "npx vue-cli-service build",
"test": "npx vue-cli-service test:unit",
"lint": "npx vue-cli-service lint",
"serve": "npx vue-cli-service serve"
},
"dependencies": {
"axios": "^0.21.0",
"core-js": "^3.4.3",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"register-service-worker": "^1.6.2",
"store2": "^2.11.1",
"vue": "^3.0.0",
"vue-router": "^3.1.3",
"vuex": "^3.1.2"
},
"devDependencies": {
"#types/jest": "^24.0.19",
"#typescript-eslint/eslint-plugin": "^2.28.0",
"#typescript-eslint/parser": "^2.28.0",
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-plugin-pwa": "^4.1.0",
"#vue/cli-plugin-router": "^4.1.0",
"#vue/cli-plugin-typescript": "^4.3.1",
"#vue/cli-plugin-vuex": "^4.1.0",
"#vue/cli-service": "^4.2.3",
"#vue/devtools": "^5.3.3",
"#vue/eslint-config-prettier": "^5.0.0",
"#vue/eslint-config-typescript": "^5.0.2",
"#vue/test-utils": "1.0.0-beta.29",
"eslint": "^6.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.0.0",
"lint-staged": "^9.4.3",
"prettier": "^1.19.1",
"typescript": "^3.8.3",
"vue-template-compiler": "^2.6.10"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue,ts}": [
"vue-cli-service lint",
"git add"
]
}
}
TL;DR: Run npm install.
vue-cli-service is provided by the #vue/cli-service in your devDependencies. Because you don't specify the package in the npx command, it fails if it has to look in the registry. Without npx, your npm script will look in node_modules/.bin for vue-cli-service. You can remove npx from your npm scripts and you should see the same results you're getting now.
The fact that npx isn't finding vue-cli-service indicates that you have not run npm install. Do that and your npm scripts should work as is. Without running npm install, you will certainly run into other issues once you fix this one.
If, for some reason, you want the npm scripts to work without running npm install, you can tell npx where to find the binary in the registry. Change npx vue-cli-service in your npm scripts to be npx -p #vue/cli-service vue-cli-service instead and it should fix this problem. But you will certainly run into other problems. You'll want npm install regardless.
But to really get at the root of things, you'll need to figure out why the difference between WSL and non-WSL environments in your setup. My guess is that you have #vue/cli-service installed globally somewhere that only WSL finds it in your PATH but that's just a guess.

buefy#0.9.3 requires a peer of vue#^2.6.11 but none is installed

I want to install the latest version of buefy in my project, which is 0.9.3. Currently I have installed 0.8.3
If I run npm install -g buefy#latest I receive
npm WARN buefy#0.9.3 requires a peer of vue#^2.6.11 but none is
installed. You must install peer dependencies yourself.
buefy#0.9.3 updated 1 package in 0.511s
However, Buefey 0.8.2 remains installed in package.json
I also have difficulties to understand the error, because I have vue 2.6.12 installed.
I tried to run (as explained in https://stackoverflow.com/a/58254678/2311074)
$ npm install --save-dev "vue#^2.6.11"
which returned
adam#adam-MS-7A63:~/www/homestead/memberportal$ npm install --save-dev "vue#^2.6.11"
npm WARN laravel-mix-purgecss#5.0.0 requires a peer of laravel-mix#^5.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN trumbowyg#2.21.0 requires a peer of jQuery#>=1.8 but none is installed. You must install peer dependencies yourself.
npm WARN vuetifyjs-mix-extension#0.0.2 requires a peer of laravel-mix#^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.1.3 (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
+ vue#2.6.12
updated 1 package and audited 1679 packages in 4.824s
33 packages are looking for funding
run `npm fund` for details
found 27 vulnerabilities (24 low, 3 high)
run `npm audit fix` to fix them, or `npm audit` for details
but I still get the same message when trying to upgrade buefy.
Any hints what I am missing? 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": "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 --open --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.19",
"babel-plugin-component": "^1.1.1",
"bootstrap": "^4.5.2",
"cross-env": "^7.0",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"jquery": "^3.5.1",
"laravel-mix": "^4.1.4",
"laravel-mix-purgecss": "^5.0.0-rc.1",
"lodash": "^4.17.20",
"popper.js": "^1.12",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.27.0",
"sass-loader": "^7.3.1",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12",
"vuetifyjs-mix-extension": "0.0.2"
},
"dependencies": {
"axiom": "^0.1.6",
"buefy": "^0.8.20",
"element-ui": "^2.13.1",
"modal-video": "^2.4.2",
"prod": "^1.0.1",
"trumbowyg": "^2.21.0",
"vue-multiselect": "^2.1.6",
"vue-scrollto": "^2.19.1",
"vue-trumbowyg": "^3.6.2",
"vuetify": "^2.3.13",
"vuetify-loader": "^1.6.0"
}
}
npm install -g means you're trying to install a package globally.

events.js:154 throw er; // Unhandled 'error' event [duplicate]

This question already has answers here:
Angular2 QuickStart npm start is not working correctly
(32 answers)
Closed 6 years ago.
I got error, when I create angular 2 application. I follow link create sample application. when I run
npm start
I got bellow error,
events.js:154
throw er; // Unhandled 'error' event
^
Error: watch node_modules/weinre/web/weinre/target/WiRuntimeImpl.amd.js ENOSPC
at exports._errnoException (util.js:856:11)
at FSWatcher.start (fs.js:1313:19)
at Object.fs.watch (fs.js:1341:11)
at createFsWatchInstance (/home/mts/project/testSails1/frontend/node_modules/chokidar/lib/nodefs-handler.js:37:15)
at setFsWatchListener (/home/mts/project/testSails1/frontend/node_modules/chokidar/lib/nodefs-handler.js:80:15)
at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/mts/project/testSails1/frontend/node_modules/chokidar/lib/nodefs-handler.js:228:14)
at FSWatcher.NodeFsHandler._handleFile (/home/mts/project/testSails1/frontend/node_modules/chokidar/lib/nodefs-handler.js:255:21)
at FSWatcher.<anonymous> (/home/mts/project/testSails1/frontend/node_modules/chokidar/lib/nodefs-handler.js:473:21)
at FSReqWrap.oncomplete (fs.js:82:15)
I got npm logs like this,
npm
ERR! Linux 3.19.0-51-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "lite"
npm ERR! node v5.6.0
npm ERR! npm v3.8.0
npm ERR! code ELIFECYCLE
npm ERR! frontend#1.0.0 lite: `lite-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend#1.0.0 lite script 'lite-server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the frontend package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! lite-server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs frontend
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls frontend
npm ERR!
There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/mts/project/testSails1/frontend/npm-debug.log
npm run lite exited with code 1
How I solve this?
That means you have already run the app, then you attempted to run it one more time without stopping the last run. Therefore, it was conflicted. You must stop the last run <=> click the stop button (red-square button on debug panel).
My previous package.json is,
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.8",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.2",
"typings":"^0.6.8"
}
}
I added to package.json like this,
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run http\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"http": "http-server -p 3000 -a 127.0.0.1 -o",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.8",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"http-server": "^0.9.0",
"typescript": "^1.8.2",
"typings":"^0.6.8"
}
}
now project working find.
there are change only lite ==> http then working find