How to install Recharts in React 16 project - recharts/recharts GitHub Wiki

If you attempt to use Recharts version 3 in your React 16 project, you will find this error:

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: [email protected]
npm error Found: @types/[email protected]
npm error node_modules/@types/react
npm error   dev @types/react@"^16.8.x" from the root project
npm error   peer @types/react@"^16.0.0" from @types/[email protected]
npm error   node_modules/@types/react-dom
npm error     dev @types/react-dom@"^16.8.x" from the root project
npm error
npm error Could not resolve dependency:
npm error peerOptional @types/react@"^18.2.25 || ^19" from [email protected]
npm error node_modules/react-redux
npm error   peer react-redux@"8.x.x || 9.x.x" from [email protected]
npm error   node_modules/recharts
npm error     recharts@3 from the root project
npm error   peerOptional react-redux@"^7.2.1 || ^8.1.3 || ^9.0.0" from @reduxjs/[email protected]
npm error   node_modules/@reduxjs/toolkit
npm error     peer @reduxjs/toolkit@"1.x.x || 2.x.x" from [email protected]
npm error     node_modules/recharts
npm error       recharts@3 from the root project
npm error
npm error Conflicting peer dependency: @types/[email protected]
npm error node_modules/@types/react
npm error   peerOptional @types/react@"^18.2.25 || ^19" from [email protected]
npm error   node_modules/react-redux
npm error     peer react-redux@"8.x.x || 9.x.x" from [email protected]
npm error     node_modules/recharts
npm error       recharts@3 from the root project
npm error     peerOptional react-redux@"^7.2.1 || ^8.1.3 || ^9.0.0" from @reduxjs/[email protected]
npm error     node_modules/@reduxjs/toolkit
npm error       peer @reduxjs/toolkit@"1.x.x || 2.x.x" from [email protected]
npm error       node_modules/recharts
npm error         recharts@3 from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

This is because npm doesn't observe dependencies of dependencies when resolving versions.

The fix for this is to give npm a hint using overrides in your package.json file:

  "overrides": {
    "@reduxjs/toolkit": {
      ".": "^1.9.7",
      "dependencies": {
        "react": "^16.8.x"
      }
    },
    "react-redux": {
      ".": "^8.1.3",
      "react": "^16.8.x"
    }
  }

Also see an example project here: https://github.com/recharts/recharts-integ/tree/main/integrations/ts-react16