Redux Toolkit与React.tsx兼容问题及模块解析错误求助

错误原因 #

问题核心在于：你的Babel配置未对@reduxjs/toolkit模块做转译处理，而新版Redux Toolkit使用了ES2020+的可选链操作符（?.），当前项目的Babel环境（比如旧版react-scripts）不支持直接解析该语法，且默认情况下Babel不会处理node_modules目录下的文件，最终导致打包时出现语法解析错误。

解决方法 #

根据你的项目环境，选择对应方案：

方案1：基于Create React App（react-scripts）且无法升级到最新版 #

既然更新react-scripts出现兼容性问题，可通过react-app-rewired修改默认配置，让Babel转译Redux Toolkit：

• 安装依赖：

  npm install react-app-rewired customize-cra --save-dev
  

• 在项目根目录创建config-overrides.js文件，写入：

  const { override, babelInclude } = require('customize-cra');
  const path = require('path');
  
  module.exports = override(
    babelInclude([
      path.resolve('src'),
      path.resolve('node_modules/@reduxjs/toolkit'),
    ])
  );
  

• 修改package.json中的scripts命令，替换原react-scripts为react-app-rewired：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
  

方案2：降级Redux Toolkit到兼容版本 #

如果不想修改配置，可降级Redux Toolkit到不使用ES2020+语法的旧版本，比如v1.9.x：

npm install @reduxjs/toolkit@1.9.7

方案3：自定义Webpack配置项目 #

如果是自行配置的Webpack，修改配置让Babel处理Redux Toolkit：

• 在Webpack的module.rules中添加对@reduxjs/toolkit的包含：

  module.exports = {
    // ...其他配置
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          include: [
            path.resolve(__dirname, 'src'),
            path.resolve(__dirname, 'node_modules/@reduxjs/toolkit'),
          ],
          use: 'babel-loader',
        },
      ],
    },
  };
  

• 确保Babel配置中包含可选链支持：在.babelrc或babel.config.js中添加：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": "> 0.25%, not dead"
      }],
      "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-proposal-optional-chaining"]
  }
  

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