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
Related
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.
I'm trying to deploy my front-end reactjs to Netlify, but I'm getting an error while installing react-ribbon package
I had a similar error while installing it locally and I had to force install it which worked and the package is working app(locally)
Now what I need is to make Netlify do the same thing (force install react-ribbon) but I'm not sure on how to go around to doing this
Is there some kind of flag I can add to the dependency in package.json so Netlify will recognize that this requires a force install
Or is there another similar ribbon package I can find that works similar to react-ribbon I can use instead without needing the force flag.
I tried multiple different ribbon packages but they all give me the same error while installing.
TL;DR: Specify environment variable NPM_CONFIG_LEGACY_PEER_DEPS = true in Netlify.
Long explanation:
First of all, you should understand what the error is about when you were installing react-ribbon.
That error is most likely something like this
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-ribbons#1.0.6
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.10.2" from react-ribbons#1.0.6
Basically, react-ribbons is expecting React 16, which I don't think you are using such an old version of React. So NPM believes react-ribbon is not compatible with your project, and prevents the installation.
Now by adding --force, which is self-explanatory enough, you are essentially asking NPM to install that regardless. And --legacy-peer-deps will more or less achieve the same thing and is less destructive.
And for the environment variable, this is simply one way of how NPM reads config. So if you set NPM_CONFIG_LEGACY_PEER_DEPS = true, NPM will automatically add the --legacy-peer-deps to the commands.
https://docs.npmjs.com/cli/v8/using-npm/config#environment-variables
And if you HAVE to use --force, which I don't recommend, you can do NPM_CONFIG_FORCE = true instead.
I need to use SSR for one of my existing angular project. For that, I have migrated one of my projects from v8 to v13.0.0, which itself took a lot of time.
HOwever, now that the app is running fine on v13.0.0, I tried adding SSR to it using
ng add #nguniversal/express-engine
This commands seems to add 13.0.1 of universal, but it keeps failing with errors similar to below one:
D:\my-app-universal>ng add #nguniversal/express-engine i Using package
manager: npm √ Found compatible package version:
#nguniversal/express-engine#13.0.1. √ Package information loaded.
The package #nguniversal/express-engine#13.0.1 will be installed and
executed. Would you like to proceed? Yes npm ERR! code ERESOLVE npm
ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR!
While resolving: my-app-universal#0.0.0 npm ERR! Found:
#angular/animations#13.0.3 npm ERR! node_modules/#angular/animations
npm ERR! #angular/animations#"~13.0.0" from the root project npm
ERR! npm ERR! Could not resolve dependency: npm ERR! peer
#angular/animations#"13.2.3" from #angular/platform-server#13.2.3 npm
ERR! node_modules/#angular/platform-server npm ERR! peer
#angular/platform-server#"^13.0.1" from
#nguniversal/express-engine#13.0.1 npm ERR!
node_modules/#nguniversal/express-engine npm ERR!
#nguniversal/express-engine#"13.0.1" 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
C:\Users\saurabhtiwari\AppData\Local\npm-cache\eresolve-report.txt for
a full report.
npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\saurabhtiwari\AppData\Local\npm-cache_logs\2022-02-20T12_03_46_821Z-debug.log
× Package install failed, see above.
I have tried a lot to read through the errors and updating package.json to match the required version of peers but it just doesn't go away.
Is there a systematic way to resolve these errors.
Is there a particular version of universal that might go well with Angular 13.
Any suggestions are welcomed.
I followed #misha130's comments advice and fixed the version numbers. I didn't need to need to install with --legacy-peer-deps or --force.
The solution was to upgrade #angular/cli & #angular/core.
With a fresh install, my initial version was 13.0.4. You will need to upgrade them one at a time as the update command fails if there are staged and uncommitted changes in the repository.
ng update #angular/cli
git add . && git commit -m 'nguniversal fix 1 - update #angular/cli'
ng update #angular/core
git add . && git commit -m 'nguniversal fix 2 - update #angular/core'
ng add #nguniversal/express-engine
Thanks everyone for their inputs in the comment. I figured it out as below.
As suggested in comments, first I installed the universal package using --legacy --per --deps
npm install #nguniversal/express-engine --save --legacy-peer-deps
This installed the packages in the node_modules, although the required express-server related files were not added.
To add those files, I then ran:
ng add #nguniversal/express-engine
This creates the required file. It will also try to install the package again and will fail in doing so. Since the package have been installed already, I guess you can ignore its 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
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)