导入react-native-google-mobile-ads时TypeError错误原因排查

问题背景 #

在Expo 48.0.18 + React Native 0.71.8项目中，使用react-native-google-mobile-ads@11.1.1集成AdMob，初始化代码如下：

import mobileAds from 'react-native-google-mobile-ads';

mobileAds()
  .initialize()
  .then(adapterStatuses => {
    // 初始化完成
  });

执行npx expo start --web后，所有平台均抛出错误；使用eas build --platform android --profile development --local构建也失败。

错误日志 #

Web运行错误 #

Uncaught TypeError: (0 , react_native_web_dist_index__WEBPACK_IMPORTED_MODULE_7__.requireNativeComponent) is not a function
    at ./node_modules/react-native-google-mobile-ads/lib/module/ads/BaseAd.js (BaseAd.tsx:155:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/react-native-google-mobile-ads/lib/module/ads/BannerAd.js (AppOpenAd.ts:55:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/react-native-google-mobile-ads/lib/module/index.js (useRewardedInterstitialAd.ts:47:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./scripts/ad_manager.js (YourLibsScreen.jsx:56:1)

EAS构建错误片段 #

asgeir@DESKTOP-THTRHRB:/mnt/e/Projects/Fun Libs/FunLibs$ cat /home/asgeir/.npm/_logs/2023-07-12T15_07_11_817Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/usr/local/bin/node',
1 verbose cli   '/usr/local/lib/node_modules/npx/node_modules/npm/bin/npm-cli.js',
1 verbose cli   'install',
1 verbose cli   'eyJqb2IiOnsidHlwZSI6Im1hbmFnZWQiLCJwbGF0Zm9ybSI6ImFuZ[...]

项目依赖配置 #

{
  "name": "funlibs",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^18.0.1",
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.3.17",
    "@reduxjs/toolkit": "^1.9.5",
    "expo": "~48.0.18",
    "expo-dev-client": "~2.2.1",
    "expo-splash-screen": "~0.18.2",
    "expo-status-bar": "~1.4.4",
    "mocha": "^10.2.0",
    "npm": "^9.7.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-drawer": "^2.5.1",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-google-mobile-ads": "^11.1.1",
    "react-native-progress": "^5.0.0",
    "react-native-reanimated": "^2.14.4",
    "react-native-safe-area-context": "^4.7.1",
    "react-native-safe-area-view": "^1.1.1",
    "react-native-svg": "13.4.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "~0.18.10",
    "react-redux": "^8.1.1",
    "redux": "^4.2.1",
    "unit.js": "^2.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

已尝试的操作 #

• 删除node_modules后重新安装
• 升级所有依赖包
• 清理构建产物与缓存后重新构建
• 在不同电脑、操作系统上构建

错误原因 #

1. Web平台无支持 #

react-native-google-mobile-ads仅适配Android和iOS原生平台，不支持Web环境。Web运行时，包内调用的requireNativeComponent是React Native原生专属API，react-native-web对该API的实现不兼容，直接抛出函数不存在的错误。

2. 原生平台未正确集成组件 #

使用Expo Dev Client（expo run:*）属于bare workflow，react-native-google-mobile-ads需要通过Expo Config Plugin完成原生配置，但你未安装对应的插件（@react-native-google-mobile-ads/admob），导致原生组件未被正确链接，运行时无法找到原生模块，触发相同的requireNativeComponent错误。

3. EAS构建的依赖问题 #

EAS构建时的npm错误，本质是依赖安装过程中出现异常，可能与网络、缓存或隐性版本冲突有关，但核心诱因还是原生组件未配置到位导致构建流程中断。

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