I am trying to host my react website on netlify but there is a npm install error

Question

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: [email protected]
12:28:21 AM: npm ERR! Found: [email protected]
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 [email protected]
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

Answer 1

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
3. Go to Build & deploy section > choose Environment
4. Add two new Environment variables key: CI with value: false and key: NPM_FLAGS with value: --legacy-peer-deps
5. Hit save and then redeploy your site

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

Answer 2

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