渲染React应用报Cannot read property 'prototype' of undefined如何解决

• React版本：^17.0.2
• Node版本：v17.4.0
• webpack版本：^5.69.0
• 项目未自定义webpack.config配置文件
• 触发报错：Uncaught TypeError: Cannot read property 'prototype' of undefined
• 控制台无其余额外错误输出

这个报错本质是模块解析/构建环节异常，导致React核心对象没有被正确引入，代码访问类原型属性时拿到了undefined，结合当前环境，触发概率从高到低排序如下：

• 最高发：Node 17+版本内置升级了OpenSSL 3.0，和webpack 5默认使用的旧版加密算法不兼容，构建依赖时会出现静默失败，最终React相关模块导出内容为空，触发原型读取报错
• 次常见：react与react-dom版本不匹配，比如锁文件异常导致安装了17.x版本的react，但拉取到了18.x版本的react-dom，两个大版本内部初始化逻辑不兼容，拿不到正确的React基类对象
• 低概率场景：JSX编译配置错误，转译JSX时使用了和React 17不匹配的runtime规则，导致编译后的代码引用了不存在的React导出对象

按顺序操作即可，每做完一步可以启动项目验证是否修复：

1. 先校验React相关依赖版本一致性
   执行以下命令查看本地实际安装的依赖版本：

   npm ls react react-dom
   

   如果两个包的大版本不一致，直接重新安装匹配版本：

   npm install react@^17.0.2 react-dom@^17.0.2
   

2. 修复Node 17+与webpack 5的OpenSSL兼容问题
   在项目根目录新建.env文件，写入如下配置：

   NODE_OPTIONS=--openssl-legacy-provider
   

   如果需要临时修改启动脚本验证，可直接调整package.json里的脚本配置：
   • Windows系统：

   "scripts": {
     "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
     "build": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts build"
   }
   

   • Mac/Linux系统：

   "scripts": {
     "start": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
     "build": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts build"
   }
   

3. 清除缓存重装依赖
   如果以上两步操作后仍报错，执行以下命令清除本地依赖缓存后重装：

   # 删除现有依赖和锁文件
   rm -rf node_modules package-lock.json yarn.lock
   # 重新安装全量依赖
   npm install
   

补充提示：如果是手动搭建的webpack项目，还需要检查babel配置中@babel/preset-react的runtime参数，React 17需要设置runtime: 'automatic'才能匹配新版JSX转换逻辑，配置错误也会触发同类报错。

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