集成react-native-web后React-redux运行抛出exports未定义错误

云上老周

2026-10-5

报错根因

这个错误是react-redux依赖的ESM格式@babel/runtime包和web端打包配置的模块兼容规则不匹配导致的。纯React Native项目的默认metro打包会自动处理node_modules内的ES模块转译，但接入react-native-web后，web端打包工具未将react-redux及其依赖的@babel/runtime纳入转译范围，就会触发exports is not defined报错。

解决方案

方案1：新增打包转译白名单
如果使用webpack作为web端打包工具，在babel-loader配置中增加react-redux和@babel/runtime到include范围：

module: {
  rules: [
    {
      test: /\.(js|jsx|ts|tsx)$/,
      include: [
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'node_modules/react-redux'),
        path.resolve(__dirname, 'node_modules/@babel/runtime'),
      ],
      use: ['babel-loader']
    }
  ]
}

如果使用metro作为web端打包工具，在metro.config.js中添加转译包配置：

module.exports = {
  // 其余原有配置保持不变
  transpilePackages: ['react-redux', '@babel/runtime']
}

方案2：调整Babel runtime配置
在项目根目录的babel.config.js或.babelrc文件中，将@babel/plugin-transform-runtime的useESModules参数设置为false，强制统一使用CommonJS格式的runtime引入：
```
{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "useESModules": false
    }]
  ]
}
```
方案3：升级兼容版本（无侵入修复）
直接将react-redux升级到7.2.9及以上版本，该版本已经官方修复了和react-native-web搭配使用时的ESM模块兼容问题，无需修改任何打包配置即可正常运行。