Redux Toolkit与React.tsx兼容异常及模块解析失败求助

错误原因分析 #

报错里的cache?.has是ES2020的可选链语法，你的项目存在两个核心兼容性问题：

1. react-redux与React版本不匹配：react-redux 9.x仅支持React 18及以上版本，但你当前使用的是React 17.0.1。
2. Redux Toolkit与react-scripts版本不兼容：Redux Toolkit 2.x会使用ES2020+语法，但react-scripts 4.0.0默认的Babel配置无法完全转译这些新语法，导致模块解析失败。

之前有人建议更新@types/react完全无效，因为问题根源不是类型定义，而是语法转译和依赖版本不兼容。

修复方案（二选一） #

方案一：降级依赖适配现有React版本 #

无需升级React或react-scripts，将Redux生态依赖降级到兼容React 17和react-scripts 4.x的版本：
修改package.json的dependencies部分为：

{
  "name": "in",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.7",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^8.1.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "redux": "^4.2.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

执行npm install或yarn install即可。

方案二：升级依赖到最新兼容版本 #

彻底升级React和构建工具，适配Redux Toolkit 2.x的要求：
修改package.json的dependencies部分为：

{
  "name": "in",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^2.0.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^9.1.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.1",
    "redux": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

执行npm install后，修改项目入口文件（如src/index.tsx），将React 17的渲染方式改为React 18的：

// 旧代码
import ReactDOM from 'react-dom';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// 新代码
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

如果使用TypeScript，额外安装@types/react@^18.2.0和@types/react-dom@^18.2.0即可。

内容的提问来源于stack exchange，提问作者Demian