redux-toolkit: @reduxjs/toolkit doesn't sit well with react-redux 9.0.0+

No matter the version of @reduxjs/toolkit (in my case, either 2.0.1. or 1.9.7), I can’t install the new react-redux.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: next-app@undefined
npm ERR! Found: react-redux@8.1.3
npm ERR! node_modules/react-redux
npm ERR!   react-redux@"^9.0.0" from the root project
npm ERR!   peerOptional react-redux@"^7.2.1 || ^8.1.3 || ^9.0.0" from @reduxjs/toolkit@2.0.1
npm ERR!   node_modules/@reduxjs/toolkit
npm ERR!     @reduxjs/toolkit@"^2.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! react-redux@"^9.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: redux@5.0.0
npm ERR! node_modules/redux
npm ERR!   peerOptional redux@"^5.0.0" from react-redux@9.0.2
npm ERR!   node_modules/react-redux
npm ERR!     react-redux@"^9.0.0" 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.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/vince/.npm/_logs/2023-12-06T23_10_06_622Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/vince/.npm/_logs/2023-12-06T23_10_06_622Z-debug-0.log

About this issue

Original URL
State: closed
Created 7 months ago
Reactions: 1
Comments: 32 (5 by maintainers)

Most upvoted comments

Yeah, that’s the other problem here.

I just published React-Redux 9.0.3, which lowers the React types dep. But, it still needs to be at least 18.2.25. Please try updating your project to at least that version, and preferably the latest 18.2.41.

markerikson on Dec 10, 2023

in your package.json:

{
  // ...
  "dependencies": {
    "@reduxjs/toolkit": "^2.0.1",
    "react-redux": "^9.0.2",
    "redux-persist": "^6.0.0"
  },
  "overrides": {
    "redux-persist": {
      "redux": "^5.0.0"
    }
  }
}

phryneas on Dec 7, 2023

I uninstalled redux-logger but it made no difference.

VincentLu91 on Dec 7, 2023

it works on the new project. however on my existing project, it still errors out. See my package.json

{
  "name": "my-app",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chatscope/chat-ui-kit-react": "^1.10.1",
    "@redux-devtools/extension": "^3.2.6",
    "@reduxjs/toolkit": "^1.9.5",
    "@sanity/block-content-to-react": "^3.0.0",
    "@sanity/client": "^6.9.1",
    "@sanity/image-url": "^1.0.2",
    "@stripe/stripe-js": "^2.2.0",
    "@supabase/auth-helpers-nextjs": "^0.8.7",
    "@supabase/auth-helpers-react": "^0.4.2",
    "@supabase/auth-ui-react": "^0.4.6",
    "@supabase/supabase-js": "^2.39.0",
    "axios": "^1.6.2",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "file2arraybuffer": "^1.2.2",
    "get-blob-duration": "^1.2.0",
    "moment": "^2.29.4",
    "next": "^14.0.3",
    "next-sanity-image": "^6.1.1",
    "npm-check-updates": "^16.14.11",
    "raw-body": "^2.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-media-recorder": "1.6.5",
    "react-phone-number-input": "^3.3.7",
    "react-redux": "^8.1.3",
    "react-select": "^5.8.0",
    "recordrtc": "^5.6.2",
    "redux-persist": "^6.0.0",
    "stripe": "^14.7.0",
    "styled-jsx": "^5.1.2"
  },
  "devDependencies": {
    "@types/node": "20.3.1",
    "eslint": "8.55.0",
    "eslint-config-next": "^14.0.3",
    "@types/react": "^18.2.41",
    "@types/react-dom": "^18.2.17",
    "@types/redux-logger": "3.0.9",
    "redux-logger": "3.0.6"
  }
}

I added

“@types/node”: “20.3.1”, “@types/react”: “^18.2.41”, “@types/react-dom”: “^18.2.17”, “@types/redux-logger”: “3.0.9”, “redux-logger”: “3.0.6”

Then ran

npm i

After that, I attempted to install:

npm add @reduxjs/toolkit@2.0.1 react-redux@9.0.2

But still got

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: next-firebase-login-email@undefined
npm ERR! Found: react-redux@8.1.3
npm ERR! node_modules/react-redux
npm ERR!   react-redux@"9.0.2" from the root project
npm ERR!   peerOptional react-redux@"^7.2.1 || ^8.1.3 || ^9.0.0" from @reduxjs/toolkit@2.0.1
npm ERR!   node_modules/@reduxjs/toolkit
npm ERR!     @reduxjs/toolkit@"2.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! react-redux@"9.0.2" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: redux@5.0.0
npm ERR! node_modules/redux
npm ERR!   peerOptional redux@"^5.0.0" from react-redux@9.0.2
npm ERR!   node_modules/react-redux
npm ERR!     react-redux@"9.0.2" 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.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/vince/.npm/_logs/2023-12-07T18_00_46_687Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/vince/.npm/_logs/2023-12-07T18_00_46_687Z-debug-0.log

VincentLu91 on Dec 7, 2023

It looks like the actual problem here is that the Next project defaults to listing:

"@types/react": "18.2.8",
"@types/react-dom": "18.2.5",

React-Redux as currently published wants newer versions:

"@types/react": "^18.2.41",
"@types/react-dom": "^18.2.17",

If i update the Next app’s package.json to list those same newer React types versions, before trying to upgrade React-Redux and Redux Toolkit, it installs fine:

$ npm add @reduxjs/toolkit@2.0.1 react-redux@9.0.2

added 1 package, removed 4 packages, changed 8 packages, and audited 44 packages in 1s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

So, try that?

markerikson on Dec 7, 2023

That’s my suspicion. Perhaps we should wait for a newer version that is compatible with @redux/toolkit?

VincentLu91 on Dec 7, 2023

Hmm. I just tried running that myself in a new empty project with NPM 9.8.1, and it worked.

What version of NPM are you using? Is this in an empty project or an existing one?

npm version: 9.8.1 node version: v18.18.2

I tried it on both my existing app and a new one.

I just started a new project to prove this is an issue: npx create-next-app --example with-redux nextjs_redux_new

The dependencies:

"dependencies": {
    "@reduxjs/toolkit": "1.9.5",
    "next": "latest",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-redux": "8.1.0"
  },

Then when I installed the newest version of react-redux, it still fails. Even after upgrading reduxjs/toolkit

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: react-redux@8.1.0
npm ERR! node_modules/react-redux
npm ERR!   react-redux@"9.0.0" from the root project
npm ERR!   peerOptional react-redux@"^7.2.1 || ^8.0.2" from @reduxjs/toolkit@1.9.5
npm ERR!   node_modules/@reduxjs/toolkit
npm ERR!     @reduxjs/toolkit@"1.9.5" from the root project
npm ERR!     peerOptional @reduxjs/toolkit@"^1 || ^2.0.0-beta.0" from react-redux@8.1.0
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! react-redux@"9.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: redux@5.0.0
npm ERR! node_modules/redux
npm ERR!   peerOptional redux@"^5.0.0-rc" from react-redux@9.0.0
npm ERR!   node_modules/react-redux
npm ERR!     react-redux@"9.0.0" 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.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/vince/.npm/_logs/2023-12-07T17_00_12_993Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/vince/.npm/_logs/2023-12-07T17_00_12_993Z-debug-0.log```

VincentLu91 on Dec 7, 2023

I have the same problem. Installing npm install @reduxjs/toolkit react-redux from the quick start guide gives me the following error:

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: react-redux@9.0.2 npm ERR! Found: @types/react @18.2.33 npm ERR! node_modules/@types/react npm ERR! dev @types/react@“18.2.33” from the root project npm ERR! @types/react@“*” from @types/react-dom @18.2.14 npm ERR! node_modules/@types/react-dom npm ERR! dev @types/react-dom@“18.2.14” from the root project npm ERR! @types/react-dom@“^18.0.0” from @testing-library/react @14.0.0 npm ERR! node_modules/@testing-library/react npm ERR! dev @testing-library/react@“^14.0.0” from the root project npm ERR! 1 more (zustand) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peerOptional @types/react@“^18.2.41” from react-redux@9.0.2 npm ERR! node_modules/react-redux npm ERR! react-redux@“^9.0.0” from the root project npm ERR! peerOptional react-redux@“^7.2.1 || ^8.1.3 || ^9.0.0” from @reduxjs/toolkit @2.0.1 npm ERR! node_modules/@reduxjs/toolkit npm ERR! @reduxjs/toolkit@“^2.0.0” from the root project npm ERR! npm ERR! Conflicting peer dependency: @types/react @18.2.42 npm ERR! node_modules/@types/react npm ERR! peerOptional @types/react@“^18.2.41” from react-redux@9.0.2 npm ERR! node_modules/react-redux npm ERR! react-redux@“^9.0.0” from the root project npm ERR! peerOptional react-redux@“^7.2.1 || ^8.1.3 || ^9.0.0” from @reduxjs/toolkit @2.0.1 npm ERR! node_modules/@reduxjs/toolkit npm ERR! @reduxjs/toolkit@“^2.0.0” 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. npm ERR! npm ERR! npm ERR! For a full report see:

peterlonnquist on Dec 7, 2023