React项目出现Uncaught TypeError，如何定义http.ServerResponse原型？

错误原因 #

你在React前端项目中引入了Express的核心模块（response.js是Express内部文件），但React运行在浏览器环境，而Express是Node.js后端框架——浏览器环境不存在Node.js的http模块，导致http.ServerResponse为undefined，进而触发读取prototype的错误。之前的config-overrides.js仅处理了crypto、fs等模块的兼容，未覆盖http模块的模拟。

解决方案 #

通过配置react-app-rewired和webpack的polyfill，让浏览器环境模拟Node.js核心模块：

1. 安装必要的polyfill包

npm install stream-http https-browserify crypto-browserify browserify-zlib stream-browserify util buffer process --save-dev
npm install node-polyfill-webpack-plugin --save-dev

2. 修改config-overrides.js
   替换或补充原有配置：

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const webpack = require('webpack');

module.exports = function override(config, env) {
  // 全局polyfill插件，覆盖大部分Node.js核心模块
  config.plugins.push(new NodePolyfillPlugin());
  
  // 配置webpack fallback，补充http模块的浏览器兼容
  if (!config.resolve.fallback) {
    config.resolve.fallback = {};
  }
  config.resolve.fallback = {
    ...config.resolve.fallback,
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    fs: false, // 浏览器无法模拟fs模块，直接忽略
    crypto: require.resolve('crypto-browserify'),
    zlib: require.resolve('browserify-zlib'),
    stream: require.resolve('stream-browserify'),
    util: require.resolve('util/'),
    buffer: require.resolve('buffer/')
  };

  // 注入全局变量（如Buffer、process）
  config.plugins.push(
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    })
  );

  return config;
};

3. 额外建议
   React是前端框架，尽量避免在项目中直接引入Express的后端模块。如果是第三方依赖间接引入了Express，建议检查依赖树，替换为前端友好的替代包；如果是自己误写了引入代码，直接删除相关Express模块的引用即可。

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