使用React-Native Web转Web应用出现Uncaught ReferenceError: exports未定义报错

数据老陈

2026-10-8

问题解决方法

错误根因

该报错是ES模块语法未被正确编译为浏览器可识别格式导致的，你当前配置存在两处核心错误：webpack目标运行环境配置错误、第三方ES模块依赖未加入Babel编译范围。

分步修改方案

第一步：修正webpack运行目标配置
打开你的webpack.config.js，找到如下配置：
```
target: ['node'],
```
修改为web环境适配的配置：
```
target: 'web',
// webpack5可使用target: ['web', 'es5'] 兼容低版本浏览器
```
你之前配置的node目标是给服务端打包使用的，会默认使用Node.js的模块规则，浏览器环境不存在exports等CommonJS全局变量，会直接触发该报错。
第二步：将需要编译的第三方ES模块加入Babel编译列表
找到compileNodeModules配置项，目前是空数组，将报错涉及的依赖添加进去：
```
const compileNodeModules = [
  'react-redux',
  '@babel/runtime'
].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));
```
你当前的Babel配置只会编译项目自身src目录等业务代码，react-redux、@babel/runtime发布的ES模块版本代码未被编译，浏览器无法直接识别ESM导出语法。
第三步（可选，如上述两步修改后仍报错可添加）：调整Babel配置强制转换模块格式
打开你的babel.config.js，修改为如下配置：
```
module.exports = {
  presets: [
    ['module:metro-react-native-babel-preset', {
      modules: 'commonjs'
    }]
  ],
};
```
该配置会强制将所有ES模块语法转换为CommonJS格式，彻底规避ESM相关的全局变量缺失问题。
额外优化（可选）：如果你不需要将项目打包为UMD格式的第三方库，可以删除output配置中的libraryTarget: 'umd'行，使用webpack默认输出规则即可。