Expo SDK v41启动Web端报错：编译失败无法解析'../Utilities/Platform'模块

问题原因 #

这个错误是Expo SDK 41配套的react-native 0.63.2与react-native-web 0.13.x的兼容问题导致的：

• react-native 0.63.x的Utilities目录下仅提供了Platform.android.js、Platform.ios.js两个端专属文件，没有无后缀的通用Platform.js文件
• react-native-web 0.13.x版本的模块映射规则存在缺失，编译web端时无法自动将../Utilities/Platform的导入路径指向react-native-web提供的web端Platform实现，导致路径解析失败。

解决方案 #

可任选以下两种方案解决：

方案1：配置Webpack别名（推荐，无需修改node_modules文件） #

1. 安装Expo 41适配的webpack配置包：

npm install @expo/webpack-config@0.16.24 --save-dev

2. 在项目根目录新建webpack.config.js文件，写入以下内容：

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

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // 配置别名映射缺失的Platform模块
  config.resolve.alias['react-native/Libraries/Utilities/Platform'] = 'react-native-web/dist/exports/Platform';
  return config;
};

3. 重启Expo web服务即可生效。

方案2：手动补全缺失文件（临时解决） #

1. 在/var/www/myapp/node_modules/react-native/Libraries/Utilities目录下新建Platform.js文件，写入以下内容：

import Platform from 'react-native-web/dist/exports/Platform';
export default Platform;

2. 若要避免每次重新安装依赖后都需要手动添加，可将上述Platform.js文件放在项目根目录，然后在package.json的scripts字段中新增postinstall钩子：

"scripts": {
  "postinstall": "cp ./Platform.js ./node_modules/react-native/Libraries/Utilities/Platform.js"
}

后续执行npm install时会自动将文件复制到对应位置。

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