Expo Web环境下react-native-google-mobile-ads打包报错求助

针对你遇到的Expo Web构建时加载react-native-google-mobile-ads导致的错误，优先选择彻底隔离Web环境对该依赖的加载，而非强制转CommonJS，原因是后者可能解决了语法问题，但仍会遗留原生API缺失的后续报错，而隔离方案更直接高效。

推荐方案1：Expo平台专属文件（最简洁） #

利用Expo的平台文件自动匹配机制，将广告组件的引入拆分为原生和Web两个版本：

1. 创建两个文件：

   • AdComponent.native.js（原生RN环境加载）：

     import { BannerAd, BannerAdSize } from 'react-native-google-mobile-ads';
     export default BannerAd;
     export { BannerAdSize };
     

   • AdComponent.web.js（Web环境加载）：

     // 返回占位组件或null，避免Web环境加载无效依赖
     export default function MockBannerAd() {
       return null;
     }
     export const BannerAdSize = {}; // 导出空对象匹配原生的常量结构
     

2. 在业务代码中直接导入：

   import { Platform } from 'react-native';
   import BannerAd, { BannerAdSize } from './AdComponent';
   
   // 使用组件时无需额外判断，Expo会自动加载对应平台的版本
   function App() {
     return (
       <div>
         {Platform.OS !== 'web' && <BannerAd size={BannerAdSize.BANNER} unitId="your-ad-unit-id" />}
       </div>
     );
   }
   

这种方式完全规避了Webpack对react-native-google-mobile-ads依赖的解析，是Expo生态下最符合设计的方案。

推荐方案2：Webpack配置排除依赖 #

如果不想拆分文件，可以修改Webpack配置，直接忽略相关依赖的加载：

1. 确保已安装@expo/webpack-config，然后在项目根目录创建webpack.config.js：

   const createExpoWebpackConfigAsync = require('@expo/webpack-config');
   const webpack = require('webpack');
   
   module.exports = async function (env, argv) {
     const config = await createExpoWebpackConfigAsync(env, argv);
   
     // 用IgnorePlugin忽略指定依赖的导入
     config.plugins.push(
       new webpack.IgnorePlugin({
         resourceRegExp: /react-native-google-mobile-ads|@iabtcf\/core/,
       })
     );
   
     // 或者用externals将依赖映射为空对象（二选一即可）
     config.externals = {
       ...config.externals,
       'react-native-google-mobile-ads': '{}',
       '@iabtcf/core': '{}',
     };
   
     return config;
   };
   

2. 配合代码中的条件导入：

   import { Platform } from 'react-native';
   
   let BannerAd = null;
   let BannerAdSize = {};
   if (Platform.OS !== 'web') {
     // 动态导入，配合Webpack配置忽略
     const adsModule = require('react-native-google-mobile-ads');
     BannerAd = adsModule.BannerAd;
     BannerAdSize = adsModule.BannerAdSize;
   }
   

不推荐强制转CommonJS的原因 #

强制将ES模块转为CommonJS需要额外配置Babel或Webpack的模块解析规则，且即使解决了@iabtcf/core的类语法问题，react-native-google-mobile-ads内部依赖的NativeModules等原生API在Web环境仍不存在，会引发新的Cannot read property 'xxx' of undefined错误，后续需要Mock大量原生接口，反而增加复杂度。

内容的提问来源于stack exchange，提问作者dezerb