导入@reduxjs/toolkit时出现ReferenceError: exports未定义问题求助

你的依赖存在严重的版本不兼容问题，尤其是Babel 6.x版本和当前使用的Webpack 5、React 18、Redux Toolkit 1.9完全不匹配，这是触发exports未定义错误的核心原因。以下是具体修复步骤：

1. 升级Babel相关依赖到兼容版本 #

首先卸载旧的Babel 6.x包：

npm uninstall babel-cli babel-core babel-preset-env babel-preset-react

安装Babel 7.x核心及适配Webpack 5的babel-loader：

npm install @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader@8.x --save-dev

注：无需保留babel-plugin-transform-class-properties，Babel 7的@babel/preset-env已包含类属性转换能力。

2. 更新Babel配置文件 #

修改你的.babelrc或babel.config.json为以下内容：

{
  "presets": [
    ["@babel/preset-env", { "targets": "defaults" }],
    "@babel/preset-react"
  ]
}

3. 确保Webpack配置中babel-loader正确设置 #

检查Webpack配置文件（如webpack.config.js），确保JS/JSX文件的处理规则正确：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

4. 清理缓存并重新安装依赖 #

# 删除旧依赖和锁文件
rm -rf node_modules package-lock.json
# Windows系统执行：
# rmdir /s /q node_modules && del package-lock.json

# 重新安装依赖
npm install

完成以上步骤后，重新启动项目，应该能解决exports未定义的错误。由于你学习的是2019年的课程，当时的技术栈版本与当前差异较大，建议尽量保持核心依赖版本的兼容性，避免类似问题。

内容的提问来源于stack exchange，提问作者Seyed Mohammad Mirabdollahi