访问网页时浏览器报错TypeError: 无法读取undefined的prototype属性如何解决

核心报错说明 #

该报错为读取undefined的prototype属性失败，触发点是http.ServerResponse.prototype，本质是运行时http对象为undefined。

具体产生原因 #

• 90%以上的场景都是运行环境不匹配：http是Node.js内置的服务端原生模块，仅能在Node.js服务端环境运行，浏览器环境没有内置该模块，若将包含这段逻辑的代码放到前端浏览器执行，http变量默认为undefined就会触发该报错。
• 服务端代码编写错误：如果这段代码本身就是Node.js服务端逻辑，就是漏写了http模块的引入语句，比如CommonJS规范漏了const http = require('http')，ES模块规范漏了import http from 'node:http'，导致http变量未定义。
• 全栈项目打包配置错误：用Vite、Webpack等打包工具的全栈项目，如果把服务端专用的代码/依赖打包到了前端客户端产物中，比如误引入了express、koa等纯服务端框架的代码到前端逻辑里，也会触发该报错。

排查修复步骤 #

• 先确认报错代码的运行位置：如果这段代码是在前端页面中运行，直接删除相关逻辑，前端没有操作ServerResponse的场景，所有和服务端响应对象相关的逻辑必须迁移到后端服务中实现。
• 若为Node.js服务端报错：检查http模块的引入语句是否拼写正确，Node.js版本是否匹配所用的引入语法，比如12.x以下的低版本Node不支持带node:前缀的模块引入。
• 若为全栈项目打包后报错：
  • Webpack项目可以在配置中添加node: { http: false }，避免打包工具误将服务端http模块打包进前端产物。
  • Vite项目检查是否在客户端代码目录下引入了服务端专用的依赖，服务端逻辑要单独放到非客户端打包的目录中，不要和前端代码混写。
  • 排查package.json的依赖列表，确认有没有把express等纯服务端依赖错误安装到前端生产依赖中，这类依赖不能在前端代码里引用。
• 快速验证：可以在报错代码行前添加console.log(http)，如果输出为undefined就能直接确认是http模块未正确加载的问题。

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