Expo构建Web端报错Cannot assign to read only property 'exports' of object

算力阿峰

2026-10-4

问题原因

这个报错是Web端打包阶段混合使用CommonJS和ES Module语法导致的：Expo的iOS/Android端采用Metro打包，默认对两种模块规范的混用做了兼容处理，因此可以正常运行；而Web端采用Webpack打包，默认开启严格ES模块规则，exports在该规则下为只读属性，当代码中出现直接给exports赋值、或者同时混用require和import/export的情况时，就会抛出该错误，导致页面白屏。

修复步骤

第一步：修改Babel配置开启模块兼容
打开项目根目录的babel.config.js，新增sourceType: 'unambiguous'配置，让Babel自动识别每个文件的模块规范，配置示例如下：
```
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    // 新增以下配置
    sourceType: 'unambiguous'
  };
};
```
第二步：清理缓存重新构建
执行以下命令删除历史缓存和旧构建产物：
```
rm -rf .expo web-build
```
之后重新执行构建命令：
```
expo build:web
```
构建完成后启动本地服务验证即可：
```
npx serve web-build
```
第三步：（可选）第三方依赖兼容处理
如果执行完前两步问题仍然存在，说明是项目依赖的第三方包内部存在模块规范混用的问题：
1. 找到报错栈里指向的第三方依赖包名
2. 安装@expo/webpack-config自定义Webpack配置，将该依赖加入Babel转译白名单即可。