Dependency tree issue in React

Question

I'm getting a dependency tree issue between react and styled-components, but my react version is updated to the correct version for the styled components, to the best of my knowledge:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.1.0" from the root project
npm ERR!   peer react@">= 16.8.0" from [email protected]
npm ERR!   node_modules/styled-components
npm ERR!     styled-components@"^5.3.6" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from [email protected]
npm ERR! node_modules/react-dom
npm ERR!   peer react-dom@">= 16.8.0" from [email protected]
npm ERR!   node_modules/styled-components
npm ERR!     styled-components@"^5.3.6" 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.

Answer 1

You have dependency conflict (incorrect and potentially broken dependency) as it says, so try to run the command with --force, or --legacy-peer-deps. If it doesn't take effect, the temporary solution is using prior versions of the Node.js (downgrading the Node.js version) as it causes this kind of errors to happen sometimes.