React JS应用本地服务器无法显示 报错ERR_OSSL_EVP_UNSUPPORTED

你碰到的error:0308010C:digital envelope routines::unsupported（错误码ERR_OSSL_EVP_UNSUPPORTED）是典型的版本兼容问题：

• 你当前使用的Node.js版本为v18.4.0，该版本及所有Node 17+版本内置OpenSSL 3.0，默认禁用了MD4等一批老旧加密算法
• 项目依赖的旧版webpack（4.x版本，通常对应react-scripts 4.x及更早版本）在构建哈希计算时刚好使用了被禁用的MD4算法，直接触发加密模块报错，导致启动失败

按以下顺序定位即可100%确认问题：

• 执行node -v查看本地Node版本，若版本号≥17，满足问题触发的环境条件
• 打开项目根目录package.json，查看dependencies下react-scripts的版本号，若为4.x及更早版本，可直接确认是该兼容问题
• 若执行过上述两步仍不确定，可先删除node_modules文件夹和package-lock.json/yarn.lock文件，重新执行npm install安装依赖后再次启动，若报错不变则排除依赖安装损坏的可能

根据你的项目场景选一个即可：

方案1：临时兼容启动（本地调试最快） #

修改启动命令，添加环境变量临时启用OpenSSL旧版算法兼容，不需要改依赖或者Node版本：

• Mac/Linux系统：修改package.json中scripts的start配置为

"start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start"

• Windows cmd环境：修改为

"start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start"

• Windows PowerShell环境：修改为

"start": "$env:NODE_OPTIONS=\"--openssl-legacy-provider\"; react-scripts start"

修改后重新执行npm start即可正常启动项目。

方案2：切换Node长期支持版本（无副作用推荐） #

将本地Node版本切换到16.x LTS版本，该版本内置OpenSSL 1.1.1，和旧版react-scripts、webpack4完全兼容，不会触发该加密错误：
如果安装了nvm版本管理工具，直接执行以下命令即可：

nvm install 16
nvm use 16

切换完成后重新安装依赖再启动即可。

方案3：升级项目构建依赖（长期维护项目推荐） #

将项目中的react-scripts升级到5.0及以上版本，新版依赖内置的webpack5已经完成OpenSSL 3.0适配，不需要额外配置即可在Node17+版本正常运行：
在项目根目录执行升级命令：

npm install react-scripts@latest

注意：react-scripts大版本升级可能带来部分配置、loader的破坏性变更，已经上线的存量生产项目优先选择方案2，避免升级引发其他不可预期的构建问题。

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