0

I am trying to set up a Gatsby project. The package.json file clearly wants react-drag-drop-files@2.3.5 but npm install is installing version 2.3.8, which is causing a dependency issue with react@18 and react@17. I am new to Node.js so I am not completely sure if that is the real issue.

The error log:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-drag-drop-files@2.3.8
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   peer react@"^16.9.0 || ^17.0.0 || ^18.0.0 || ^0.0.0" from gatsby-link@4.24.1
npm ERR!   node_modules/gatsby-link
npm ERR!     gatsby-link@"^4.24.1" from gatsby@4.24.8
npm ERR!     node_modules/gatsby
npm ERR!       gatsby@"^4.6.0" from the root project
npm ERR!       12 more (babel-plugin-remove-graphql-queries, ...)
npm ERR!   30 more (gatsby, gatsby-plugin-image, gatsby-plugin-offline, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from react-drag-drop-files@2.3.8
npm ERR! node_modules/react-drag-drop-files
npm ERR!   react-drag-drop-files@"^2.3.5" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^18.0.0" from react-drag-drop-files@2.3.8
npm ERR!   node_modules/react-drag-drop-files
npm ERR!     react-drag-drop-files@"^2.3.5" 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.

The package.json file:

  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@fluentui/react": "^8.51.1",
    "@mui/icons-material": "^5.4.1",
    "@mui/material": "^5.5.2",
    "@mui/x-data-grid": "^5.7.0",
    "axios": "^0.25.0",
    "bootstrap-icons": "^1.7.2",
    "cgview": "^1.2.0",
    "gatsby": "^4.6.0",
    "gatsby-plugin-gatsby-cloud": "^4.6.0",
    "gatsby-plugin-image": "^2.6.0",
    "gatsby-plugin-manifest": "^4.6.0",
    "gatsby-plugin-offline": "^5.6.0",
    "gatsby-plugin-react-helmet": "^5.6.0",
    "gatsby-plugin-sharp": "^4.6.0",
    "gatsby-source-filesystem": "^4.6.0",
    "gatsby-transformer-sharp": "^4.6.0",
    "prop-types": "^15.8.0",
    "react": "^17.0.1",
    "react-component-export-image": "^1.0.6",
    "react-dom": "^17.0.1",
    "react-drag-drop-files": "^2.3.5",
    "react-helmet": "^6.1.0"
  }
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
Sukanta
  • 75
  • 6
  • In your `package.json` remove the `^` from in front of the react drag drop dependency, i.e. change to `"react-drag-drop-files": "2.3.5",`. The caret means it will install latest minor version, see here: https://stackoverflow.com/questions/22343224/whats-the-difference-between-tilde-and-caret-in-package-json – Jayce444 Nov 24 '22 at 03:00

0 Answers0