Expo项目Web开发时react-native模块解析错误求助

在Expo React Native应用中执行npx expo start --web（或执行npx expo start后按w键）时，node_modules/react-native路径下出现大量模块解析错误，表现为类似Module not found: Can't resolve '../Utilities/Platform'的缺失依赖问题，怀疑是包兼容性冲突，但无法定位具体原因。

项目配置信息 #

package.json #

{
  "name": "prototype",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "ts:check": "tsc",
    "start": "expo start --tunnel",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^19.0.0",
    "@turf/turf": "^6.5.0",
    "@types/react": "~18.2.14",
    "expo": "^49.0.13",
    "expo-location": "~16.1.0",
    "expo-sensors": "~12.3.0",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-maps": "1.7.1",
    "react-native-svg": "13.9.0",
    "react-native-web": "~0.19.6",
    "typescript": "^5.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

app.json #

{
  "expo": {
    "name": "prototype",
    "slug": "prototype",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

已尝试的解决方法 #

• 删除node_modules后重新执行npm install
• 执行npx expo install --fix修复依赖版本
• 执行npm cache clean --force后重新安装依赖
• 在app.json的web字段添加"bundler": "metro"，切换为Metro打包器
• 在webpack.config.js中配置单个模块别名，解决了部分路径错误，但因错误数量过多无法逐个处理

推荐的解决方案 #

1. 升级react-native-maps版本 #

Expo 49对react-native-maps的web适配要求版本1.8.0及以上，当前使用的1.7.1可能存在兼容性问题，执行以下命令升级：

npm install react-native-maps@1.8.0

2. 配置完整的Webpack别名映射 #

创建或修改项目根目录下的webpack.config.js，添加react-native到react-native-web的完整别名覆盖，解决所有路径解析问题：

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

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  
  config.resolve.alias = {
    ...config.resolve.alias,
    'react-native$': 'react-native-web',
    'react-native/Libraries/Utilities/Platform$': 'react-native-web/dist/exports/Platform',
    'react-native/Libraries/EventEmitter/RCTDeviceEventEmitter$': 'react-native-web/dist/exports/DeviceEventEmitter',
    'react-native/Libraries/vendor/emitter/EventEmitter$': 'react-native-web/dist/vendor/emitter/EventEmitter',
    'react-native/Libraries/Components/View/ViewStylePropTypes$': 'react-native-web/dist/exports/View/style',
    // 可根据具体错误信息补充其他缺失模块的别名
  };

  return config;
};

3. 彻底清除缓存并重建 #

执行以下命令彻底清理项目缓存，确保依赖安装无残留问题：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install
npx expo start --web --clear

4. 验证核心依赖兼容性 #

确认以下核心依赖版本与Expo 49严格匹配：

• react-native-web: ~0.19.6（当前版本符合）
• react: 18.2.0（当前版本符合）
• react-dom: 18.2.0（当前版本符合）

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