如何在React/NextJS中通过Webpack使用Node.js http2客户端功能

核心问题说明 #

node:http2 是 Node.js 专属内置模块，浏览器环境不存在该模块。Webpack 在客户端打包时会自动移除这类仅 Node 可用的模块，这就是你导入后拿到 undefined 的根本原因。以下分两种场景给出可行方案：

场景1：代码运行在 Node 环境（如 Next.js 服务端组件、Electron 渲染进程） #

Next.js 13+ 配置 #

如果你的客户端代码实际运行在 Node 环境（如 Electron），修改 next.config.js 阻止 Webpack 剔除 node:http2：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 保留 http2 模块的解析路径
      config.resolve.fallback = {
        ...config.resolve.fallback,
        'node:http2': require.resolve('node:http2'),
      };
      // 将 http2 标记为外部依赖，不打包进客户端代码
      config.externals = [...config.externals, 'node:http2'];
    }
    return config;
  },
};

module.exports = nextConfig;

若为 Next.js 服务端组件，可直接导入 node:http2，无需额外配置（服务端组件默认运行在 Node 环境）。

纯 React（Webpack 5+）配置 #

修改 webpack.config.js：

module.exports = {
  // ...其他基础配置
  resolve: {
    fallback: {
      'node:http2': require.resolve('node:http2'),
    },
  },
  externals: {
    'node:http2': 'commonjs2 node:http2',
  },
};

场景2：代码运行在浏览器环境 #

浏览器没有 node:http2 模块，需使用原生 Fetch API 实现 HTTP/2 流功能（浏览器会自动与支持 HTTP/2 的服务器协商协议）：

async function streamHttp2Response() {
  const response = await fetch('https://your-http2-enabled-server.com/stream-endpoint', {
    method: 'GET',
    // 可选：自定义请求头
    headers: { 'Accept': 'text/plain' },
  });

  if (!response.body) throw new Error('无法读取响应流');

  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  // 逐块读取流数据
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    console.log('收到流数据块：', decoder.decode(value));
  }
}

该方案完全支持流操作，符合你的需求，且兼容所有现代浏览器。

关键提示 #

• 不要尝试在浏览器环境中强行引入 Node 的 node:http2 模块，这是不可能实现的，因为浏览器没有对应实现。
• 若必须使用 Node http2 模块的特定 API（如 http2.connect），需将这部分逻辑放在服务端（Next.js API 路由、服务端组件），客户端通过调用服务端接口间接使用。

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