React应用突发TypeError: 无法读取undefined的'prototype'属性如何解决？

你遇到的报错本质是前端浏览器运行环境中引入了仅支持Node.js服务端环境的express依赖，浏览器没有内置Node.js专属的http核心模块，导致http.ServerResponse为undefined，访问其prototype属性时触发报错。

TypeError: Cannot read properties of undefined (reading 'prototype')

(anonymous function)
.../client/node_modules/express/lib/response.js:42
  39 |  * @public
  40 |  */
  41 | 
> 42 | var res = Object.create(http.ServerResponse.prototype)

定位步骤 #

• 全局搜索项目代码，检查是否存在import 'express'、require('express')之类的引入语句，重点排查近期新增的工具文件、通用组件、路由配置。
• 检查package.json的依赖列表，确认是否误将express安装到了前端项目的依赖中。
• 执行npm ls express查看项目依赖树，确认是否是第三方依赖间接引入了express，排查近期新增的npm包是否为服务端专属包。
• 如果是自定义构建配置的项目，检查webpack/vite配置是否错误将服务端代码纳入前端打包范围、是否配置了错误的模块alias指向express相关路径。
• 如果是SSR（服务端渲染）项目，检查是否将express相关逻辑误写到了客户端生命周期（如React的useEffect、客户端组件）中执行。

解决方案 #

• 若为自己的代码误引入express：删除所有前端代码中对express的引入语句，执行npm uninstall express从项目依赖中移除express，删除node_modules和lock文件后重新安装依赖验证。
• 若为第三方依赖间接引入express：评估替换该服务端专属的第三方依赖为前端可用的替代包。
• 若为SSR项目代码混淆：将express相关逻辑全部封装到仅服务端执行的代码块中，比如Next.js项目放在getServerSideProps、服务端组件、API路由文件内，禁止在客户端代码中直接引用。
• 若为构建配置问题：修正构建配置的打包范围，排除服务端代码目录；如确实需要兼容服务端模块的浏览器使用，可安装stream-http作为http模块的浏览器polyfill兜底。

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