React Native Web项目集成导航功能时出现ReferenceError错误求助

架构老林

2026-4-13

嘿，我之前在React Native Web项目里用导航库的时候也碰到过类似的模块兼容问题，给你几个实用的解决方向，你可以挨个试试：

先把你遇到的错误信息贴出来，方便更清晰定位问题：

运行Web端时触发的错误：

ReferenceError exports is not defined
Call Stack
 (anonymous function)
  KK/./node_modules/@react-navigation/native/lib/module/index.js:2:23
 ./node_modules/
  native/lib/module/index.js@http://localhost:8080/vendor.7ceb43757766eae5e934.js:380:1
 options.factory
  main.6bef3be8aaf5bb9a9a58.js

可能的解决步骤：

检查依赖版本兼容性：先确认你用的@react-navigation/native版本是否适配React Native Web，有些旧版本的导航库可能只输出了CommonJS格式，没做Web端的ES模块适配，建议升级到最新稳定版试试。
调整Webpack配置：在项目的webpack配置文件里，修改resolve的配置，让Webpack优先识别浏览器端的模块入口和ES格式的文件：
```
resolve: {
  extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
  mainFields: ['browser', 'module', 'main'],
}
```
修改Babel配置：如果是模块转换的问题，可以在babel.config.js里添加CommonJS转ES模块的插件，确保浏览器能正确识别模块导出：
```
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    '@babel/plugin-transform-modules-commonjs'
  ]
};
```
清除缓存重装依赖：有时候缓存或者依赖冲突也会导致这类问题，执行以下命令重置：
```
rm -rf node_modules package-lock.json
npm install
npm start -- --reset-cache
```