When I run `ng new`, npm has a dependency problem [duplicate] - node.js

This question already has answers here:
unable to resolve dependency tree error for creating new angular project
(16 answers)
Closed 1 year ago.
i ran ng new in terminal. I ended up getting an npm error
new folder
run ng new in new folder
set the name and accept defaults (and use SCSS)
watch it create files and error at the end
⠸ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project-name#0.0.0
npm ERR! Found: jasmine-core#3.7.1
npm ERR! node_modules/jasmine-core
npm ERR! dev jasmine-core#"~3.7.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core#">=3.8" from karma-jasmine-html-reporter#1.7.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR! dev karma-jasmine-html-reporter#"^1.5.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!
npm ERR! See /Users/user/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/user/.npm/_logs/2021-07-11T18_12_50_796Z-debug.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

I had this same issue with a fresh project, etc.
In the generated package.json you should see a line that says "jasmine-core": "~3.7.0" but it seems that other dependencies (I believe karma based on the error output here) require jasmine-core at 3.8.0 or higher. Simply edit the line that says "jasmine-core": "~3.7.0", to be "jasmine-core": "~3.8.0", and then manually run npm install and it should succeed.
You should then be able to run ng serve --open from the same directory and have it run just fine.

I changed "jasmine-core": "~3.7.0", to "jasmine-core": "~3.8.0" in package.json.template, I can create projects with no issues now.
The location may vary, mine is:
/usr/local/lib/node_modules/#angular/cli/node_modules/#schematics/angular/workspace/files/package.json.template
This will fix the problem in new projects

Related

How to fix npm Err ERESOLVE peer depandencies for ReactJS for Vercel Hosting deployment

Synopsis
After about a month of working, I could deploy my project. I cloned the folder (just in case) and used Git to upload it to my GitHub Repository. I then logged onto Vercel's Hosting, chose their free hobby pricing (the free one) and connected my Github account to which I uploaded my portfolio. I then pressed 'deploy' and received an error that started with "npm Err code ERESOLVE" please look at the section marked an error. After about 2-3 hours of researching and Stack Overflow looking, I could find an answer.
Context
After completing my month-long project on VS Code, I decided to clone the folder and remove everything inside the directory outside. This means that I originally had my VScode folder and another folder that npx created (Image 1). However, to upload it to Github, I removed it from the following folder created and put it in the main outside folder (See image 2). Then I downloaded Git (checked it using its version) and uploaded my copied folder to a GitHub Repo called portfolio-new (check marked Github repo below). Once I was done, I headed to Vercel, a hosting platform, and decided to host my react project there. Vehicle integration makes it, so they run their npm start on their platform. Therefore I have no control over the deployment after I press 'deploy.' After pressing deploy, I received an error of dependencies (see error below).
Problem
To recap, as mentioned above, the problem is that Vercel is its system, and I cannot control how it does npm start (you will see why that is important). Therefore when it runs, it is an error. It means I must fix the code, not how I run it.
Why not use --force or --legacy-peer-deps
The issue with this is that Vercel's system needs to let me control its commands. Therefore, I cannot use either of these commands to make it force to run. That means the answer that shall be posted must fix the actual error instead of having a temporary go-around. Again to repeat, I CANNOT use these two commands!
[13:28:58.885] Cloning github.com/Abdjsjiski/portfolio-new (Branch: main, Commit: 5f53564)
[13:28:58.889] Skipping build cache since Vercel CLI used --force option
[13:28:59.634] Cloning completed: 748.787ms
[13:29:00.056] Running "vercel build"
[13:29:00.521] Vercel CLI 28.10.0
[13:29:01.088] Installing dependencies...
[13:29:02.759] npm ERR! code ERESOLVE
[13:29:02.775] npm ERR! ERESOLVE could not resolve
[13:29:02.775] npm ERR!
[13:29:02.775] npm ERR! While resolving: react-notifications-menu#1.0.6
[13:29:02.776] npm ERR! Found: react#18.2.0
[13:29:02.776] npm ERR! node_modules/react
[13:29:02.776] npm ERR! react#"^18.2.0" from the root project
[13:29:02.776] npm ERR! peer react#">=16.8.0" from #emotion/react#11.10.5
[13:29:02.776] npm ERR! node_modules/#emotion/react
[13:29:02.776] npm ERR! #emotion/react#"^11.10.5" from the root project
[13:29:02.776] npm ERR! peer #emotion/react#"^11.0.0-rc.0" from #emotion/styled#11.10.5
[13:29:02.776] npm ERR! node_modules/#emotion/styled
[13:29:02.776] npm ERR! #emotion/styled#"^11.10.5" from the root project
[13:29:02.776] npm ERR! 3 more (#mui/material, #mui/styled-engine, #mui/system)
[13:29:02.776] npm ERR! 3 more (#mui/material, #mui/styled-engine, #mui/system)
[13:29:02.776] npm ERR! 41 more (#emotion/styled, ...)
[13:29:02.777] npm ERR!
[13:29:02.777] npm ERR! Could not resolve dependency:
[13:29:02.777] npm ERR! peer react#"^15.0.0 || ^16.0.0" from react-notifications-menu#1.0.6
[13:29:02.777] npm ERR! node_modules/react-notifications-menu
[13:29:02.777] npm ERR! react-notifications-menu#"^1.0.6" from the root project
[13:29:02.777] npm ERR!
[13:29:02.777] npm ERR! Conflicting peer dependency: react#16.14.0
[13:29:02.777] npm ERR! node_modules/react
[13:29:02.777] npm ERR! peer react#"^15.0.0 || ^16.0.0" from react-notifications-menu#1.0.6
[13:29:02.777] npm ERR! node_modules/react-notifications-menu
[13:29:02.777] npm ERR! react-notifications-menu#"^1.0.6" from the root project
[13:29:02.777] npm ERR!
[13:29:02.778] npm ERR! Fix the upstream dependency conflict, or retry
[13:29:02.778] npm ERR! this command with --force, or --legacy-peer-deps
[13:29:02.778] npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
[13:29:02.778] npm ERR!
[13:29:02.778] npm ERR! See /vercel/.npm/eresolve-report.txt for a full report.
[13:29:02.778]
[13:29:02.778] npm ERR! A complete log of this run can be found in:
[13:29:02.778] npm ERR! /vercel/.npm/_logs/2022-12-31T18_29_01_308Z-debug-0.log
[13:29:02.796] Error: Command "npm install" exited with 1
Github Repo
If it isnt obvious by now i am using only pure ReactJS
Before I clone the folder
After the cloned folder and put everything outside
i am aware there are many similar questions to mine but mine has more to do with how to fix the actual problem then the other temporary go arounds + how to deploy it properly instead of leaving it on Vercel
Before posting, I did some research which included the following:
Using the --force or -- legacy-peer-deps command anyway
Removing node modules and package-lock.json and doing the npm install
Removing cache with force
Audit fix -- force and audit fix normal
npm fund
Re-installing / updating ALL my dependencies with force
Updating react scripts
Using -- save and retrying all commands
None of these worked. I updated my GitHub repo to the newest version, redeployed it, and got the same error.
Why does your problem differ from others
It's mostly not related to the code but to the hosting platform therefore the normal answers wont work such as the above given but to fix the problem you need to fix the code itself
Ok, I found an answer after three more hours of searching!!
In Vercel, go to the change command lines and look for npm install or yarn install
Note this is more of a workaround ironic to my question but It sufficed
You can then change the command to npm install --force and it will deploy but I would still be really glad if anyone could fix the actual problem that occured

npm ERR! ERESOLVE unable to resolve dependency tree when installing #nest/microservices

I'm trying to install new dependency to my service,
#nest/microservices: ^7.0.3 and got this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vb-service-ads#0.0.1
npm ERR! Found: #nestjs/common#8.4.7
npm ERR! node_modules/#nestjs/common
npm ERR! #nestjs/common#"^8.4.7" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #nestjs/common#"^7.0.0" from #nestjs/microservices#7.6.18
npm ERR! node_modules/#nestjs/microservices
npm ERR! #nestjs/microservices#"^7.0.3" from the root project
npm ERR!
so versions of packages with problem are:
"#nestjs/common": "^8.4.7",
"#nestjs/core": "^7.6.15"
I tried to upgrade versions of core and microservices dependencies to ^8.0.0, and got more dependencies broken and also tried to downgrade common to ^7.6.15 and got same effect.
Tried to use yarn instead of npm, it resolved my problem, but i need all packages to be installed by npm
So, I resolved this problem, with deleting node_modules, package-lock.json and removing dependencies and devDependencies in package.json
After i've installed all dependencies manually one by one
you can see the solution here, or at least this is what worked for me here. https://www.angularjswiki.com/angular/unable-to-resolve-dependency-tree-error-in-angular-while-installing-npm-packages/
I leave you the part where it worked for me
To fix Unable to resolve dependency tree error in Angular while
installing npm packages follow the below steps.
Run npm install --save --legacy-peer-deps instead of npm install command. Another way is delete the node_modules folder and
package_lock.json file and then
Run npm cache clean --force after npm i --force command.

Suddenly React cannot execute the 'create-react-app' command. Why is this happening and how can I solve it? [duplicate]

This question already has answers here:
create-react-app dependency version issues with React 18
(6 answers)
Closed 10 months ago.
Even --force or --legacy-peer-deps didn't work.
Transcript:
npx create-react-app my-app
Creating a new React app in /home/zahid/my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1353 packages in 2m
171 packages are looking for funding
run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app#0.1.0
npm ERR! Found: react#18.0.0
npm ERR! node_modules/react
npm ERR! react#"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"<18.0.0" from #testing-library/react#12.1.5
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^12.0.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!
npm ERR! See /home/zahid/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/zahid/.npm/_logs/2022-04-11T22_25_02_229Z-debug-0.log
npm install --no-audit --save #testing-library/jest-dom#^5.14.1 #testing-library/react#^12.0.0 #testing-library/user-event#^13.2.1 web-vitals#^2.1.0 failed
This is going to solve the problem:
npm config set legacy-peer-deps true
Explanation:
The --legacy-peer-deps flag was introduced with v7 as a way to bypass peerDependency auto-installation; it tells NPM to ignore peer dependencies and proceed with the installation anyway. This is how things used to be with NPM v4 through v6.
npx create-react-app my-app
npm config set legacy-peer-deps true
Executing that helped me (on Linux).
Here is what worked for me:
Run npx create-react-app as normal and got the errors
Go into the package.json file and change the React version from 18.0.0 to 17.0.0
Delete the node_modules folder.
Then run npm install.
No more errors.
This works for me
I changed this in my package.json (I downgraded the versions):
"react": "^18.0.0",
"react-dom": "^18.0.0",
To
"react": "^17.0.0",
"react-dom": "^17.0.0",
Then, remember to remove your folder /nodes_modules and run this in your project main folder:
npm i
Try to run this first:
npm config set legacy-peer-deps true
And try your command again.
It worked with me!
Try to run this command first:
npm config set legacy-peer-deps true
and then type the command
npx create-react-app app-name
It worked for me.
Try this:
Delete folder node_modules and file package-lock.json
Go to file package.json and change both react and react-dom's version to 17.0.0
Now run npm install
Things should now work as expected.

How do you read npm audit ERESOLVE error?

I often receive error ERESOLVE similar to below. How do you read it?
>npm audit fix
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: myapp#0.0.0
npm ERR! Found: #angular/compiler#12.1.0
npm ERR! node_modules/#angular/compiler
npm ERR! #angular/compiler#"12.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/compiler#"12.1.1" from #angular/compiler-cli#12.1.1
npm ERR! node_modules/#angular/compiler-cli
npm ERR! dev #angular/compiler-cli#"^12.1.0" from the root project
npm ERR! peer #angular/compiler-cli#"^12.0.0 || ^12.1.0-next" from #angular-devkit/build-angular#12.1.0
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"12.1.0" from the root project
And how do you read it - Which package depends on which? Which end of the tree I have control of? Top or bottom?
Did I add #angular-devkit/build-angular into my app and it needs but cant find angular/compiler ? or is it the other way around?
I can be wrong but this is what I read:
Which package depends on which?
Your app directly depends on:
#angular/compiler#"12.1.0"
#angular/compiler-cli#"^12.1.0"
#angular-devkit/build-angular#"12.1.0"
Your app transitively depends on:
#angular/compiler#"12.1.1" from #angular/compiler-cli#12.1.1 <- which is the actual #angular/compiler-cli version installed in your node_modules.
#angular/compiler-cli#"^12.0.0 || ^12.1.0-next" from #angular-devkit/build-angular#12.1.0 <- which is the actual #angular-devkit/build-angular version installed in your node_modules.
So what I read is that there is a conflict because your app directly depends on #angular/compiler#"12.1.0" and transitively on #angular/compiler#"12.1.1" (from #angular/compiler-cli#12.1.1)
You can probably fix this by adding what it looks like a missing caret, ie #angular/compiler#"^12.1.0".
Unrelated ^, I had a similar problem but all versions where compatible. I deleted package-lock.json and node_modules and installed them again and it worked fine.
I've fixed it with following commands:
rm package-lock.json
rm -rf node_modules
yarn install
npm i

npm install fails (unable to resolve dependency tree)

Trying to reduce any changing variables and using a fresh pull of my code. They are no node-module packages or package-lock.json. I run npm install I get this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined#undefined
npm ERR! Found: react-native-screens#2.15.2
npm ERR! node_modules/react-native-screens
npm ERR! react-native-screens#"~2.15.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-screens#"^1.0.0 || ^1.0.0-alpha" from react-navigation-drawer#1.4.0
npm ERR! node_modules/react-navigation-drawer
npm ERR! react-navigation-drawer#"^1.4.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!
npm ERR! See /Users/myname/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/myname/.npm/_logs/2021-05-22T01_16_02_351Z-debug.log
If I do an install via --force or npm install --legacy-peer-deps I get a bunch of files mark as outdated and when I run npm update I get the same error. I have tried clearning the cache of my npm as well with no luck npm cache clean. I don't know why this is happening as there is no node-module folder or anything installed for it to give error under my node_modules/react-native-screens...they are no node_modules folder yet. What is causing this and how can I fix it?
Edit:
I ran npm update -g , then npm audit fix and then I got an error:
code ERESOLVE
ERESOLVE unable to resolve dependency tree
While resolving: Sculp latest app#undefined
Found: react-native-screens#2.15.2
node_modules/react-native-screens
react-native-screens#“~2.15.0” from the root project
so I ran expo install react-native-screens and saw that it couldn't find expo...checked my folder and my node_module folder is missing. Like if it never was there or gotten installed.
edit:
I have tried all the methods listed below and it gives random errors that I can not fix it undefined is not an object (evaluating ‘_core.ThemeColors.light’) and I have googled this and one of the main solutions is delete npm and package-lock.json and reinstall but that brings me back to where I started.
It works for me:
npm install --save --legacy-peer-deps
Try this:
npm config set legacy-peer-deps true
Note: this will set this flag permanently
For one time:
npm install --save --legacy-peer-deps
Try to copy your src folder and package.json file and initialize another react-native (new) and replace the source the src folder and package.json file and reenter npm install.
You can use --force in the command line, but you will problably have to deal with a broken react-native dependency later. Anyway, there are other ways of dealing with this broken dependency.
Try it in the following:
npm add react-native
expo install (your needed module)

Resources