React Native中http模块解析失败求助（已配置package.json映射）

错误详情 #

无法从../node_modules/micro-ftch/index.js解析模块http：在项目或以下目录中未找到http：
node_modules

对应出错代码片段：

52 | function fetchNode(url, _options) {
53 |     let options = { ...DEFAULT_OPT, ..._options };
54 |     const http = require('http');
|                           ^
55 |     const https = require('https');
56 |     const zlib = require('zlib');
57 |     const { promisify } = require('util');

调用栈信息：

at ModuleResolver.resolveDependency (../node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:139:15)
at DependencyGraph.resolveDependency (../node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
at Object.resolve (../node_modules/metro/src/lib/transformHelpers.js:169:21)
at Graph._resolveDependencies (../node_modules/metro/src/DeltaBundler/Graph.js:472:35)
at Graph._processModule (../node_modules/metro/src/DeltaBundler/Graph.js:260:38)
at async Graph._addDependency (../node_modules/metro/src/DeltaBundler/Graph.js:371:20)
at async Promise.all (index 1)
at async Graph._processModule (../node_modules/metro/src/DeltaBundler/Graph.js:321:5)
at async Graph._addDependency (../node_modules/metro/src/DeltaBundler/Graph.js:371:20)
at async Promise.all (index 12)

当前已配置的模块映射 #

在package.json中添加了如下配置：

"react-native": {
  "http": "@tradle/react-native-http",
  "https": "https-browserify"
},
"browser": {
  "http": "@tradle/react-native-http",
  "https": "https-browserify"
}

问题原因及解决办法 #

原因分析 #

Metro（React Native的打包工具）默认不会将package.json中的模块映射规则应用到node_modules目录下的第三方依赖。你的配置仅对项目自身源码生效，但micro-ftch是第三方包，Metro不会自动为它解析http/https这类Node.js核心模块的映射。

解决步骤 #

1. 安装所需依赖包
   先确保配置中指定的替代包已安装：

   npm install @tradle/react-native-http https-browserify browserify-zlib util --save
   

   （注：代码中还用到了zlib和util，需同步安装对应的browserify兼容包）

2. 修改Metro配置
   在项目根目录的metro.config.js中，添加resolver.extraNodeModules配置，强制Metro识别核心模块的映射：

   const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
   
   module.exports = mergeConfig(getDefaultConfig(__dirname), {
     resolver: {
       extraNodeModules: {
         http: require.resolve('@tradle/react-native-http'),
         https: require.resolve('https-browserify'),
         zlib: require.resolve('browserify-zlib'),
         util: require.resolve('util/')
       }
     }
   });
   

3. 清理缓存并重启打包服务
   清除Metro缓存，避免旧配置残留：

   npx react-native start --reset-cache
   

4. 兜底排查（若仍报错）

   • 删除node_modules和锁文件，重新安装依赖：

     rm -rf node_modules package-lock.json
     npm install
     

   • 重启React Native项目，确保配置完全生效。

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