How to resolve npm dependency with react-card-flip? - reactjs

Question

Any idea how to resolve this error? I get it when trying npm install:
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.14.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.1" from react-card-flip#1.1.0
npm ERR! node_modules/react-card-flip
npm ERR! react-card-flip#"^1.0.11" from the root project
The package.json has: "react-card-flip": "^1.0.11",
I removed the node_modules directory and the package-lock.json file.
I'm not sure where the reference to 1.1.0 is coming from. I DID try to install it earlier when trying to upgrade React 17, but ran into limitations with blueprintjs/core 3.39.0 requiring React 16.14.0.
Thanks for any ideas or help you can provide.
Full content of the package.json below in case that helps.
package.json content:
{
"files": [
"./LICENSE.md"
],
"name": "myproject",
"version": "0.1.0",
"private": true,
"dependencies": {
"#blueprintjs/core": "^3.39.0",
"#ckeditor/ckeditor5-build-classic": "^12.2.0",
"#ckeditor/ckeditor5-react": "^1.1.3",
"apexcharts": "^3.19.3",
"axios": "^0.21.1",
"bootstrap": "^3.4.1",
"cleave.js": "^1.5.2",
"country-state-city": "^1.0.0",
"fomantic-ui": "^2.8.7",
"moment": "^2.24.0",
"plaid": "^8.1.6",
"react": "^16.14.0",
"react-apexcharts": "^1.3.7",
"react-bootstrap": "^1.4.3",
"react-burger-menu": "^2.6.11",
"react-card-flip": "^1.0.11",
"react-dom": "^16.8.6",
"react-dropzone": "^10.1.4",
"react-google-login": "^5.1.21",
"react-grid-system": "^4.4.5",
"react-intl-universal": "^2.4.1",
"react-redux": "^6.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4",
"react-scroll": "^1.7.14",
"react-select": "^2.4.4",
"react-share": "^3.0.0",
"react-signature-canvas": "^1.0.3",
"react-slick": "^0.24.0",
"react-star-ratings": "^2.3.0",
"react-stripe-elements": "^3.0.0",
"reactjs-popup": "^1.3.2",
"reactstrap": "^8.0.0",
"reaptcha": "^1.4.2",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"semantic-ui-react": "^0.86.0",
"socket.io-client": "^2.3.0",
"sweetalert2": "^10.14.0",
"sweetalert2-react": "^0.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],

Answer 1

TL;DR Use npm install --legacy-peer-deps
I am able to replicate the error with npm#7 but not npm#6.
Version 7 introduced some stricter peer dependency checking. If you just want your installation command to succeed (which is what most people who encounter this error want, rather than figuring out what the dependency issue is), you can use npm install --legacy-peer-deps.
The source of the issue is that your version of react-card-flip requires react#17 but many of your other dependencies require react#16. Old npm worked around that. New npm let's you know there's a problem. You can live without react-card-flip, or update all your other dependencies (no guarantees they've all been updated to support react#17 though), or try to find an older version of react-card-flip that maybe supported react#16, although running a bunch of older versions of dependencies is not something I would recommend.

Answer 2

The solution was to update the package.json file and change the react-card-flip entry.
From:
"react-card-flip": "^1.0.11",
To:
"react-card-flip": "~1.0.11",
The carat (^) tells npm to install 1.0.11 or newer version of react-card-flip. It was trying to install the newer version 1.1.0, which relies on React version 17.0.1. The tilde (~) tells npm to install the newest minor release version. The latest minor version of react-card-flip is 1.0.11 and it requires React 16.14.0, matching what I have installed - resolving the problem.
Another work around solution is to run npm install with the parameter --legacy-peer-deps.

Answer 3

Use npm i react-card-flip --force
This will work for you as we can install this forcefully. And worked for me as well. I was facing the same issue while trying to install react-card-flip.