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

Question

Any idea how to resolve this error? I get it when trying npm install:

npm ERR! Found: [email protected] 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 [email protected] 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"
  ],

Trott Trott · Accepted Answer · 2021-02-24T01:33:20

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.

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

2 Answers