Fix the upstream dependency conflict, react-share with React 18, Deployment failed in Netlify

Question

Unable to install react-share on React 18 project and failed deployment on Netlify

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0 || ^17" from [email protected]
      
npm install --save --legacy-peer-deps react-share

Answer 1

First, utilize the advised command npm install --save --legacy-peer-deps react-share

then, in your app root directory create a .npmrc file

lastly add to the file legacy-peer-deps=true

and you're ready to deploy.

The --legacy-peer-deps flag was introduced with v7 as a way to bypass peerDependency auto-installation; it tells NPM to ignore peer deps and proceed with the installation anyway.

npmrc is the configuration file that npm allows to be used globally or user level or project level to optimize your npm environment. npmrc can be configured in four different locations. Globally. Per user. Per project.

Answer 2

Check the peer dependencies of [email protected]:

$ npm view [email protected] peerDependencies
{ react: '^16.3.0 || ^17' }

This means react-share package version 4.4.0 only works with react with version: '^16.3.0 || ^17'. But the react installed in your project is 18.x.x version, it's incompatible with version specified in peerDependency field. That's why you got the warning when trying to install it.

Two solutions:

• 4.4.1 release support React 18 in peerDependencies.

We can verify it via npm command

$ npm view [email protected] peerDependencies
{ react: '^16.3.0 || ^17 || ^18' }

Or, this commit

• Downgrading react package to those two versions: '^16.3.0 || ^17'