Expo+React Native构建Web地图应用遇Metro路径解析错误求助

问题背景 #

用Expo、Expo Router、Metro搭建跨端地图应用：移动端使用react-native-maps，Web端通过条件渲染加载React Leaflet（因react-native-maps不支持Web）。但Web构建时触发错误：

Unable to resolve "../Utilities/Platform" from "node_modules\react-native\Libraries\ReactPrivate\ReactNativePrivateInterface.js"

尝试过GitHub上的postinstall脚本方案但未生效。

可行解决方案 #

方案一：正确配置Postinstall脚本（修复路径引用） #

之前手动运行脚本可能未生效，需将脚本绑定到npm的postinstall钩子：

1. 在项目根目录创建postinstall.js文件，写入以下代码：

const fs = require('fs');
const path = require('path');

// 目标文件路径
const platformTarget = path.join(__dirname, 'node_modules/react-native/Libraries/Utilities/Platform.js');
const privateInterfaceTarget = path.join(__dirname, 'node_modules/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js');

try {
  // 确保Platform模块指向react-native-web的实现
  if (!fs.existsSync(platformTarget)) {
    fs.writeFileSync(platformTarget, 'module.exports = require("react-native-web/dist/exports/Platform");');
  }
  // 修正ReactNativePrivateInterface.js中的路径引用
  let content = fs.readFileSync(privateInterfaceTarget, 'utf8');
  content = content.replace('../Utilities/Platform', 'react-native-web/dist/exports/Platform');
  fs.writeFileSync(privateInterfaceTarget, content);
  console.log('Postinstall 修复已应用');
} catch (err) {
  console.error('Postinstall 修复失败:', err);
}

2. 打开package.json，在scripts字段中添加postinstall钩子：

"scripts": {
  // 保留原有脚本...
  "postinstall": "node postinstall.js"
}

3. 执行npm install（或yarn install），让脚本自动运行，覆盖错误的路径引用。

方案二：配置Metro别名（更稳定的长期方案） #

通过Metro的别名映射，直接将缺失的Platform模块指向react-native-web的实现：

1. 安装react-native-web依赖：

npm install react-native-web --save-dev

2. 在项目根目录创建/修改metro.config.js：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// 添加别名映射
config.resolver.alias = {
  ...config.resolver.alias,
  'react-native/Libraries/Utilities/Platform': 'react-native-web/dist/exports/Platform',
};

module.exports = config;

3. 更新babel.config.js，添加react-native-web预设：

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

方案三：彻底排除Web端对react-native-maps的打包 #

确保Web构建时完全不处理react-native-maps，从根源避免依赖问题：

1. 完善条件渲染逻辑，仅在非Web端导入react-native-maps：

import { Platform } from 'react-native';

let MapComponent;
if (Platform.OS === 'web') {
  // Web端加载React Leaflet
  const { MapContainer } = require('react-leaflet');
  MapComponent = MapContainer;
} else {
  // 移动端加载react-native-maps
  const { MapView } = require('react-native-maps');
  MapComponent = MapView;
}

// 后续使用MapComponent即可

2. 在package.json的Expo配置中，排除react-native-maps的Web打包：

"expo": {
  // 其他配置...
  "web": {
    "build": {
      "babel": {
        "exclude": ["react-native-maps"]
      }
    }
  }
}

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