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: [email protected]
[13:29:02.776] npm ERR! Found: [email protected]
[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/[email protected]
[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/[email protected]
[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 [email protected]
[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: [email protected]
[13:29:02.777] npm ERR! node_modules/react
[13:29:02.777] npm ERR! peer react@"^15.0.0 || ^16.0.0" from [email protected]
[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
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
CodePudding user response：
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