配置带Expo Router的Expo开发构建遇加载脚本错误的解决方法

问题描述 #

使用Expo Router及原生依赖（react-native-nfc-manager、expo-camera/next）搭建项目时，Android开发构建启动后出现脚本加载失败错误：

There was a problem loading the project.

This development build encountered the following error.

Unable to load script. Make sure you're either running Metro (run 'npx react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.

jniLoadScriptFromAssets

CatalystInstanceImpl.java

loadScript FromAssets

CatalystInstanceImpl.java

loadScript

JSBundleLoader.java

runJSBundle

CatalystInstanceImpl.java

createReactContext

ReactInstanceManager.java

lambda$runCreateReactContextOnNew Thread$2

ReactInstanceManager.java

$r8$lambda$AwGS8CysOZmWJw3kRVARHQvw9Ew

run

run

Thread.java

最简复现步骤：

1. 执行npx create-expo-app@latest --template tabs@50
2. 执行npx expo prebuild
3. 执行npx eas build -p android --profile development
   下载构建包后启动npx expo start -c触发错误。

解决方案 #

1. 配置开发构建的Metro服务器地址 #

修改eas.json中的development配置，明确指定开发服务器IP（替换为你的电脑局域网IP）：

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "env": {
        "EXPO_PUBLIC_DEV_SERVER_URL": "http://192.168.x.x:8081"
      }
    }
  }
}

确保手机和电脑处于同一局域网后重新构建。

2. 显式启动Metro服务器 #

启动开发服务器时指定IP和端口，避免自动检测异常：

npx expo start -c --host 0.0.0.0 --port 8081

打开APP后手动设置Metro服务器地址为你的电脑IP:8081。

3. 手动生成开发bundle #

检查android/app/src/main/assets/index.android.bundle是否存在，若不存在则手动生成：

npx react-native bundle --platform android --dev true --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

生成后重新执行npx eas build。

4. 临时禁用Hermes排查问题 #

修改android/app/build.gradle禁用Hermes，排查是否为引擎兼容性问题：

project.ext.react = [
  enableHermes: false
]

修改后重新执行npx expo prebuild和构建命令。

5. 更新CLI版本 #

确保使用最新稳定版的Expo CLI和EAS CLI：

npm install -g expo-cli eas-cli

更新后重新执行完整的prebuild和构建流程。

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