使用yarn启动React应用遇ERR_OSSL_EVP_UNSUPPORTED错误求助

问题重现 #

执行以下步骤运行项目时触发错误：

• git clone https://github.com/francoborrelli/spotify-react-web-client.git
• cd spotify-react-web-client
• yarn install
• 运行yarn start或npm start时，出现错误：

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v20.2.0 error Command failed with exit code 1. ERROR: "start-js" exited with 1.

解决方案 #

方法1：临时启动时添加环境变量 #

直接在启动命令前加上指定OpenSSL legacy provider的参数：

• Linux/macOS：

  NODE_OPTIONS=--openssl-legacy-provider yarn start
  # 或者用npm
  NODE_OPTIONS=--openssl-legacy-provider npm start
  

• Windows CMD：

  set NODE_OPTIONS=--openssl-legacy-provider && yarn start
  # 或者npm
  set NODE_OPTIONS=--openssl-legacy-provider && npm start
  

• Windows PowerShell：

  $env:NODE_OPTIONS="--openssl-legacy-provider"; yarn start
  # 或者npm
  $env:NODE_OPTIONS="--openssl-legacy-provider"; npm start
  

方法2：修改package.json永久生效 #

修改项目根目录下的package.json中的scripts字段，给start命令添加环境变量：

"scripts": {
  "start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
  // 其他脚本...
}

如果需要兼容Windows系统，先安装cross-env依赖：

npm install cross-env --save-dev
# 或者yarn
yarn add cross-env --dev

然后修改脚本：

"scripts": {
  "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
  // 其他脚本...
}

方法3：降级Node.js版本 #

如果不想使用legacy provider，可以通过Node版本管理器（如nvm）降级到v16或v18版本：

1. 安装nvm（根据系统选择对应版本）
2. 安装指定版本：

   nvm install 18
   

3. 切换到该版本：

   nvm use 18
   

4. 重新安装依赖并启动：

   yarn install
   yarn start
   

原因说明 #

Node.js v17及以上版本默认启用了OpenSSL 3.0，而旧版React项目（比如依赖旧版react-scripts）使用的加密算法与OpenSSL 3.0不兼容，因此需要指定使用旧的OpenSSL legacy provider来解决兼容性问题。

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