Expo应用运行Web端时出现"Web Bundling failed"错误的修复求助

这个问题本质是Web端构建时，Metro没有正确将react-native的模块映射到react-native-web的对应实现，以下是针对性的修复步骤：

• 检查依赖版本兼容性
  确保expo、react-native、react-native-web、expo-router版本相互兼容。执行以下命令查看当前版本：

  npm list expo react-native react-native-web expo-router
  

  若版本不匹配，使用expo upgrade同步Expo生态的版本，或手动调整依赖版本至官方推荐的兼容组合。

• 配置Metro解析规则
  在项目根目录创建或修改metro.config.js，添加Web端模块映射逻辑：

  const { getDefaultConfig } = require('expo/metro-config');
  
  const config = getDefaultConfig(__dirname);
  
  // 将react-native模块重定向到react-native-web
  config.resolver.resolveRequest = (context, moduleName, platform) => {
    if (platform === 'web' && moduleName.startsWith('react-native')) {
      return context.resolveRequest(context, moduleName.replace('react-native', 'react-native-web'), platform);
    }
    return context.resolveRequest(context, moduleName, platform);
  };
  
  // 优先解析Web端后缀的文件
  config.resolver.extensions = [
    `.web.tsx`,
    `.web.ts`,
    `.web.jsx`,
    `.web.js`,
    `.tsx`,
    `.ts`,
    `.jsx`,
    `.js`,
    `.json`,
  ];
  
  module.exports = config;
  

• 修正Babel配置
  确保babel.config.js包含react-native-web预设：

  module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo', 'module:react-native-web'],
    };
  };
  

• 彻底清理并重装依赖
  执行以下步骤清除缓存和旧依赖：

  # Windows系统
  rmdir /s /q node_modules && del package-lock.json yarn.lock
  # macOS/Linux系统
  rm -rf node_modules package-lock.json yarn.lock
  

  重新安装依赖：

  npm install
  

  最后清除Metro缓存并重启服务：

  npx expo start --clear
  

• 确认Web平台已启用
  检查app.json或app.config.js中是否包含Web平台：

  {
    "expo": {
      "platforms": ["ios", "android", "web"],
      // 其他配置项...
    }
  }
  

• 规范代码导入方式
  确保代码中Image的导入是从react-native包获取，而非相对路径：

  import { Image } from 'react-native';
  

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