23

I need some help! I'm trying to host on my reacy website on netlify but npm install error happens. Could you help me with solving this problem?

Here is a error comments

12:28:19 AM: Installing NPM modules using NPM version 7.24.0
12:28:21 AM: npm ERR! code ERESOLVE
12:28:21 AM: npm ERR! ERESOLVE unable to resolve dependency tree
12:28:21 AM: npm ERR!
12:28:21 AM: npm ERR! While resolving: simplefolio@1.0.1
12:28:21 AM: npm ERR! Found: webpack@5.54.0
12:28:21 AM: npm ERR! node_modules/webpack
12:28:21 AM: npm ERR!   dev webpack@"^5.40.0" from the root project
12:28:21 AM: npm ERR!
12:28:21 AM: npm ERR! Could not resolve dependency:
12:28:21 AM: npm ERR! peer webpack@"^4.0.0" from optimize-css-assets-webpack-plugin@6.0.1
12:28:21 AM: npm ERR! node_modules/optimize-css-assets-webpack-plugin
12:28:21 AM: npm ERR!   dev optimize-css-assets-webpack-plugin@"^6.0.1" from the root project
12:28:21 AM: npm ERR!
12:28:21 AM: npm ERR! Fix the upstream dependency conflict, or retry
12:28:21 AM: npm ERR! this command with --force, or --legacy-peer-deps
12:28:21 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
12:28:21 AM: npm ERR!
12:28:21 AM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
12:28:21 AM: npm ERR! A complete log of this run can be found in:
12:28:21 AM: npm ERR!     /opt/buildhome/.npm/_logs/2021-09-27T15_28_21_272Z-debug.log

Thank you for your help in advance

jjeon17 jjeon17
  • 389
  • 3
  • 10
  • Are you trying to do a build on your web server? Normally you'd just publish the build files from your local build. At any rate, I'm not sure how we'd help with so little information. Please see [ask]. – isherwood Sep 27 '21 at 18:19

4 Answers4

34

There are several way to fix the issue, one of quick and easy solution is

  1. Go to your project in Netlify
  2. Go to Site setting tab on the right most enter image description here
  3. Go to Build & deploy section > choose Environment enter image description here
  4. Add two new Environment variables key: CI with value: false and key: NPM_FLAGS with value: --legacy-peer-deps enter image description here
  5. Hit save and then redeploy your site

Hope this helpful. Upvote to save it for future use.

Chanrithisak Phok
  • 1,590
  • 1
  • 19
  • 29
30

Even though you're not calling npm directly, but rather via gatsby build, you should still be able to configure npm to use the desired flags with a .npmrc file. Simply add a file named .npmrc to the root of your repo with the following contents

legacy-peer-deps=true
Joel B
  • 12,082
  • 10
  • 61
  • 69
12

This issue is a result of conflicts in the dependencies of packages in the package.json file, and normally, one would run

npm install <package-name> --legacy-peer-deps

to ignore these dependencies conflict. But Netlify does not know about this flag added to npm install and as such, the install fails.

The simple solution to this is to add an environmental variable NPM_FLAGS in Netlify and assign it a value of the npm flag --legacy-peer-deps.

How to do

  • Go to the deploys section in your settings. You can make use of this link https://app.netlify.com/sites/{site-name}/settings/deploys. Replace {site-name} with the name of your site.
  • Scroll to the Environmental variables section.
  • Click on Edit variables and add the pair. NPM_FLAGS on the left and --legacy-peer-deps on the right. You could also add other flags you used while running npm install as Netlify will make use of this flag while installing the dependencies.
Steph Crown
  • 151
  • 1
  • 7
0

Hi and welcome to the community!

node_modules and package-lock.json might no longer be compatible with your current npm version.

On your local installation try:

rm node_modules
rm package-lock.json
npm install

Then re-commit on github and re-deploy to Netlify!

Fjott
  • 1,107
  • 3
  • 15
  • 38
  • First of all, thank you so much for helping me out! I follow your steps several times but it doesn't work as well. However, when I upload my files to netlify(not via github), it works! But, when I updated it through github, same error comes out. – jjeon17 jjeon17 Sep 28 '21 at 21:33
  • Strange! Do you still get this error when trying to deply from github? `npm ERR! ERESOLVE unable to resolve dependency tree` – Fjott Sep 29 '21 at 06:46
  • To be honest, I tried it over 10 times :( Even though I tried making a new repository, the same errors come out... It is weird when I tried to upload my files to Netlify directly, it works. However, when I tried to upload my files through GitHub, the netlify deploy log show the same error. I guess when I run "npm install" to my mac terminal, it shows same error message but I can handle it because I can fix it with this command with --force, or --legacy-peer-deps this command, but I couldn't solve it at Netlify because I couldn't type those command to Netlify. – jjeon17 jjeon17 Sep 29 '21 at 12:49
  • Every time I upload my files and push them to my GitHub, netlify shows the same error. I stuck this problem for over 3 weeks :( – jjeon17 jjeon17 Sep 29 '21 at 12:51
  • This solution didn't work for me neither. However setting an env variable did ! – Faouzi Jun 25 '22 at 17:09