Why did it show error when I installed package "react-modal"?

[YimingJin]

Summary:

Steps to reproduce:

Following the steps, I
1)Create a New project folder
in my case, I created reactdemo
2)in the new project folder, install the latest
reactJS: npx create-react-app support
3) the installation was successful. with ReactJS Version 17.0.1
4)then I tried to install react-modal:
d:\reactdemo\support: npm install react-modal
it was still unsuccessful.

Here attached photo is my error screenshot. My npm version is 7.0.8. Could anyone know how to solve this issue?

Expected behavior:

package "react-modal" is installed

Link to example of issue:

[davidje13]

The error you are seeing:

npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"17.x" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16" from react-modal@3.11.2
npm ERR! node_modules/react-modal
npm ERR!   react-modal@"3.x" from the root project

is because the latest version of this library on NPM does not list React 17 as an accepted peer dependency. It looks like this has been added a few days ago in the repository (029a525), so just waiting on the next release. In the meantime you'll have to downgrade your project to React 16 (e.g. npm install --save react@16) to use this library (or as the error suggests, you could use --force, but that's not a good habit to be in).

(I'm including the error message above in text form rather than a screenshot to aid future searchers. @YimingJin when reporting errors to any repository please paste the output as text rather than using screenshots for this reason)

[diasbruno]

@davidje13 @YimingJin v3.12.1 has been release. Please check if it fixes this issue. Thanks!

[suneelsfdc]

`% npm install --save react-modal
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-native@0.51.1
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.3.0
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.3.0" from the root project
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR! peer react-dom@"^18.0.0" from @testing-library/react@13.3.0
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.3.0" from the root project
npm ERR! react-dom@"^18.2.0" from the root project
npm ERR! 1 more (react-modal)
npm ERR! 3 more (react-scripts, the root project, react-modal)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.0.0" from react-native@0.51.1
npm ERR! node_modules/react-native
npm ERR! peer react-native@"^0.51" from react-native-final-tree-view@3.0.0
npm ERR! node_modules/react-native-final-tree-view
npm ERR! react-native-final-tree-view@"^3.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@16.0.0
npm ERR! node_modules/react
npm ERR! peer react@"16.0.0" from react-native@0.51.1
npm ERR! node_modules/react-native
npm ERR! peer react-native@"^0.51" from react-native-final-tree-view@3.0.0
npm ERR! node_modules/react-native-final-tree-view
npm ERR! react-native-final-tree-view@"^3.0.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/xxxxxx/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xxxxxx/.npm/_logs/2022-08-16T11_53_36_877Z-debug-0.log`

I am still getting the same error