克隆GitHub React项目本地运行报错：ERR_OSSL_EVP_UNSUPPORTED

问题重现 #

克隆GitHub上的React项目后，本地执行npm start启动开发服务器时出现如下错误：

PS C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio> npm start

> react-frontend-dev-portfolio@0.1.0 start
> react-scripts start

i ｢wds｣: Project is running at http://192.168.0.8/
i ｢wds｣: webpack output is served from /react-frontend-dev-portfolio
i ｢wds｣: Content not from webpack is served from C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\public
i ｢wds｣: 404s will fallback to /react-frontend-dev-portfolio/
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\webpack\lib\NormalModule.js:471:10)
    at C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\webpack\lib\NormalModule.js:503:5
    at C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\webpack\lib\NormalModule.js:358:12
    at C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\react-scripts\scripts\start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\webpack\lib\NormalModule.js:417:16)
    at C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\webpack\lib\NormalModule.js:452:10
    at C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\webpack\lib\NormalModule.js:323:13
    at C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\Users\ksche\OneDrive\Documents\projects\new_project\react-frontend-dev-portfolio\node_modules\babel-loader\lib\index.js:59:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.18.0

错误原因 #

Node.js v17及以上版本默认启用了OpenSSL 3.0，而项目依赖的旧版webpack（或react-scripts内置的webpack）使用的哈希算法不被OpenSSL 3.0兼容，导致启动失败。

解决方案 #

1. 临时启动时添加环境变量（Windows PowerShell） #

在终端执行以下命令启动项目：

$env:NODE_OPTIONS="--openssl-legacy-provider" && npm start

2. 修改package.json的启动脚本 #

打开项目根目录的package.json，找到scripts里的start命令，修改为：

"scripts": {
  "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
  // 其他脚本保持不变
}

修改后直接执行npm start即可启动。

3. 降级Node.js版本 #

如果不想修改脚本，可以将Node.js降级到v16.x及以下版本（比如v16.20.2），用nvm（Node版本管理器）快速切换：

• 安装nvm后，执行nvm install 16.20.2
• 执行nvm use 16.20.2
• 再运行npm start

4. 更新react-scripts到最新版本 #

如果项目允许升级依赖，执行以下命令更新react-scripts：

npm install react-scripts@latest

新版本的react-scripts已兼容Node.js v17+的OpenSSL 3.0，更新后即可正常启动。

内容的提问来源于stack exchange，提问作者SAI CHARAN KATKAM