Expo bare workflow项目运行Web端报模块找不到错误如何解决

Bare Workflow 跑Web端不是零配置，需要针对Web打包规则、端差异依赖做适配，你遇到的三个报错按以下方法逐一修复即可。

静态图片资源解析报错（两处png资源找不到） #

这个问题是Web端webpack的路径解析规则、资源处理逻辑和原生端不一致导致的：

• 首先排查路径大小写：注意：Web端文件路径大小写敏感，iOS/Android原生端无此限制，逐段检查assets/Icon/Home/switchViewIcon.png的文件夹名、文件名和代码里写的是否完全一致，常见问题是文件夹名实际是小写home但代码里写了大写Home。
• 修正普通JS文件里的资源引入方式：你提到的resourceConfig.js属于非组件类的普通JS文件，不能直接写相对路径字符串当资源地址，必须用require()包裹引入，否则Web端打包时不会处理这个路径：

// 错误写法，Web端无法识别
export const switchViewIcon = "../../assets/Icon/Home/switchViewIcon.png"
// 正确写法
export const switchViewIcon = require("../../assets/Icon/Home/switchViewIcon.png")

• 补全webpack静态资源解析配置：根目录新建webpack.config.js，写入配置让打包工具识别图片类资源：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // 添加图片资源解析规则
  config.module.rules.push({
    test: /\.(png|jpe?g|gif|webp)$/i,
    type: 'asset/resource'
  })
  return config;
}

@invertase/react-native-apple-authentication下./AppleButton找不到报错 #

这个库本身仅支持iOS原生端，没有提供Web端的实现代码，直接全局引入就会在Web打包时报错，处理方式是做端侧隔离：

• 所有用到这个库、AppleButton组件的代码，都加平台判断，仅在iOS端加载该模块：

import { Platform, View } from 'react-native';

let AppleButton = null;
if (Platform.OS === 'ios') {
  const appleAuth = require('@invertase/react-native-apple-authentication');
  AppleButton = appleAuth.AppleButton;
}

export default function LoginPage() {
  return (
    <View>
      {/* 其他通用登录组件 */}
      {AppleButton ? <AppleButton /> : null}
    </View>
  )
}

• 在刚才的webpack配置里加别名，让Web端打包时直接跳过这个库的解析，避免隐式依赖扫到时报错：

// 在config生成后、return之前加这行
config.resolve.alias['@invertase/react-native-apple-authentication'] = false;

如果Web端需要接入苹果登录，单独引入Web版的Apple JS SDK实现即可，和原生端逻辑分开维护。

基础环境补全 #

第一次跑Web端需要先装齐Web端依赖，执行以下命令：

yarn add react-native-web react-dom @expo/webpack-config

如果你的index.js入口文件没有做Web端挂载适配，补充对应逻辑：

import { AppRegistry, Platform } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

// Web端单独执行挂载
if (Platform.OS === 'web') {
  const rootTag = document.getElementById('root');
  AppRegistry.runApplication(appName, { rootTag });
}

所有修改完成后，清缓存再启动服务，避免旧缓存导致的异常：

yarn start --reset-cache
# 新开终端执行yarn run web即可

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