Expo Web运行React Native应用报错：无法解析../Utilities/Platform模块

问题描述 #

在Web端运行Expo React Native应用时触发模块解析错误：

无法从路径C:app\frontend\frontend\node_modules\react-native\Libraries\ReactNative\PaperUIManager.js解析模块../Utilities/Platform，提示以下文件均不存在：

• node_modules\react-native\Libraries\Utilities\Platform(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs|.web.scss|.scss|.web.sass|.sass|.web.css|.css|.web.cjs|.cjs)
• node_modules\react-native\Libraries\Utilities\Platform\index(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs|.web.scss|.scss|.web.sass|.sass|.web.css|.css|.web.cjs|.cjs)

报错代码位置：

15 | const NativeModules = require('../BatchedBridge/NativeModules');
16 | const defineLazyObjectProperty = require('../Utilities/defineLazyObjectProperty');
17 | const Platform = require('../Utilities/Platform');
|                           ^
18 | const UIManagerProperties = require('./UIManagerProperties');
19 |
20 | const viewManagerConfigs: {[string]: any | null} = {};

调用栈：

MetroBundlerDevServer.getStaticResourcesAsync (node_modules/@expo/cli/build/src/start/server/metro/MetroBundlerDevServer.js)
process.processTicksAndRejections (node:internal/process/task_queues)
async MetroBundlerDevServer.getStaticPageAsync (node_modules/@expo/cli/build/src/start/server/metro/MetroBundlerDevServer.js)
async (node_modules/@expo/cli/build/src/start/server/metro/MetroBundlerDevServer.js)

已尝试操作：

• 在webpack.config.js中添加别名：config.resolve.alias['../Utilities/Platform'] = 'react-native-web/dist/exports/Platform';
• 执行expo customize:web生成配置

解决方案 #

1. 调整Webpack别名配置（精准路径匹配） #

之前的相对路径别名无法被Webpack正确识别，改用完整模块路径别名：
在webpack.config.js中修改配置：

config.resolve.alias['react-native/Libraries/Utilities/Platform'] = 'react-native-web/dist/exports/Platform';

确保react-native-web已安装：

npm install react-native-web --save
# 或
yarn add react-native-web

2. 配置Metro解析规则 #

如果使用Metro作为打包工具，在metro.config.js中添加自定义解析逻辑：

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

const config = getDefaultConfig(__dirname);

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (platform === 'web' && moduleName === '../Utilities/Platform') {
    return {
      filePath: require.resolve('react-native-web/dist/exports/Platform'),
      type: 'sourceFile',
    };
  }
  return context.resolveRequest(context, moduleName, platform);
};

module.exports = config;

3. 清除缓存并重启服务 #

缓存可能导致配置不生效，执行缓存清除命令：

npx expo start --clear
# 或手动删除缓存目录
rm -rf node_modules/.cache

重新启动Web端服务：

npx expo start --web

4. 校验依赖版本兼容性 #

确保expo、react-native、react-native-web版本相互兼容，执行升级命令同步依赖：

npx expo upgrade

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