React Native升级后无法解析http模块问题求助

将React Native升级至0.72.1，并把Node版本从16.4.3切换到18.16.1后，出现无法解析http模块的错误。错误提示@smithy/node-http-handler模块中找不到http模块，已尝试清除缓存、重新安装node_modules和pods，但问题未解决，寻求可行方案。

错误日志详情 #

error: Error: Unable to resolve module http from /Users/toms/Documents/VolleyballApp/volleyball/node_modules/@smithy/node-http-handler/dist-cjs/node-http-handler.js: http could not be found within the project or in these directories:
  node_modules
  ../../../node_modules
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.NodeHttpHandler = exports.DEFAULT_REQUEST_TIMEOUT = void 0;
> 4 | const protocol_http_1 = require("@smithy/protocol-http");
    |                                                   ^
  5 | const querystring_builder_1 = require("@smithy/querystring-builder");
  6 | const http_1 = require("http");
  7 | const https_1 = require("https");
    at ModuleResolver.resolveDependency (/Users/toms/Documents/VolleyballApp/volleyball/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:139:15)
    at DependencyGraph.resolveDependency (/Users/toms/Documents/VolleyballApp/volleyball/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at Object.resolve (/Users/toms/Documents/VolleyballApp/volleyball/node_modules/react-native/node_modules/metro/src/lib/transformHelpers.js:169:21)
    at Graph._resolveDependencies (/Users/toms/Documents/VolleyballApp/volleyball/node_modules/react-native/node_modules/metro/src/DeltaBundler/Graph.js:472:35)
    at Graph._processModule (/Users/toms/Documents/VolleyballApp/volleyball/node_modules/react-native/node_modules/metro/src/DeltaBundler/Graph.js:260:38)
    at async Graph._addDependency (/Users/toms/Documents/VolleyballApp/volleyball/node_modules/react-native/node_modules/metro/src/DeltaBundler/Graph.js:371:20)
    at async Promise.all (index 1)
    at async Graph._processModule (/Users/toms/Documents/VolleyballApp/volleyball/node_modules/react-native/node_modules/metro/src/DeltaBundler/Graph.js:321:5)
    at async Graph._addDependency (/Users/toms/Documents/VolleyballApp/volleyball/node_modules/react-native/node_modules/metro/src/DeltaBundler/Graph.js:371:20)
    at async Promise.all (index 2)

当前环境 #

• react-native版本: 0.72.1
• Node版本: 18.16.1

可行解决办法 #

1. 配置Metro解析Node核心模块 #

在项目根目录的metro.config.js中添加核心模块映射：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    extraNodeModules: {
      http: require.resolve('react-native-http'),
      https: require.resolve('react-native-https'),
    },
  },
});

安装对应依赖：

npm install react-native-http react-native-https --save

2. 替换为React Native兼容的HTTP Handler #

@smithy/node-http-handler是Node.js环境专用模块，改用AWS提供的React Native适配版本：

npm uninstall @smithy/node-http-handler
npm install @aws-sdk/react-native-http-handler --save

在代码中替换导入：

// 原导入
// const { NodeHttpHandler } = require("@smithy/node-http-handler");
// 替换为
const { ReactNativeHttpHandler } = require("@aws-sdk/react-native-http-handler");

3. 调整@smithy包版本 #

查看@smithy/node-http-handler的版本兼容说明，降级到与React Native 0.72.1适配的版本，或者检查是否有官方提供的React Native适配方案。

4. 彻底清理缓存并重启服务 #

执行以下命令完成全量清理：

npx react-native start --reset-cache
rm -rf node_modules && npm install
cd ios && pod install && cd ..

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