Expo打开抽屉/模态框时出现react-dom/server.node模块解析错误求助

这个问题本质是native环境下错误引入了web专属的react-dom/server模块，React Native/Expo原生环境完全不需要这个模块。以下是具体排查和解决步骤：

• 排查新增依赖：先梳理最近新增的npm包，尤其是同时支持web和native的库（比如部分UI组件、状态管理工具）。部分跨端库在native环境下会错误加载web端代码，进而引入react-dom/server。找到可疑依赖后，可临时卸载测试，或查看库的官方文档确认native适配方式。

• 检查expo-router配置：expo-router默认适配native，但如果你的路由代码中使用了web专属API（比如服务端渲染相关方法），或者_layout.tsx里配置了web端专属规则，会触发该问题。检查app目录下所有路由文件，确保没有调用web-only的API。

• 添加Metro配置拦截web模块：创建或修改项目根目录的metro.config.js，强制让Metro在native环境下忽略react-dom/server的解析请求：

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

const config = getDefaultConfig(__dirname);

// native环境下拦截react-dom/server请求，返回空模块
config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName === 'react-dom/server' && platform !== 'web') {
    return {
      filePath: require.resolve('./empty-module.js'),
      type: 'module',
    };
  }
  return context.resolveRequest(context, moduleName, platform);
};

module.exports = config;

接着在项目根目录创建empty-module.js，内容仅需：

export {};

• 彻底清理缓存：运行npx expo start --clear，清除Metro的缓存，避免旧的依赖解析规则残留导致问题持续。

• 卸载冗余web依赖：如果你的package.json里存在react-dom、next这类纯web专属包，直接卸载即可，Expo Native项目完全不需要这些依赖。

• 确认第三方库的native适配：若你使用了MUI、AntD这类web优先的UI库，建议替换为它们的native专属版本（如MUI X Native、AntD Mobile），web版本会强制引入react-dom相关模块，导致native环境报错。

另外，建议提供package.json和app.json的具体内容，这样能更精准定位版本冲突或配置类问题。

内容的提问来源于stack exchange，提问作者J. Jackson