报错“  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ]”

报错信息

前端启动项目报错，报错信息如下：

$ yarn start
yarn run v1.22.21
$ cross-env UMI_ENV=dev umi dev
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
Bundle with webpack 5...
⏱️  MFSU Enabled
Starting the development server...

* Webpack █████████████████████████ building (10%) 0/2 entries 1/2 dependencies 0/1 modules 1 active
 ...odules\umi\node_modules\@umijs\preset-built-in\bundled\@pmmmwh\react-refresh-webpack-plugin\client\ReactRefreshEnt
ry.js

node:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:184161:18)
    at BulkUpdateDecorator.update (D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:184062:50)
    at OriginalSource.updateHash (D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack-sources2\index.js:1:51038)
    at NormalModule._initBuildHash (D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:115961:17)
    at handleParseResult (D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:116027:10)
    at D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:116119:4
    at processResult (D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:115836:11)
    at D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:115900:5
    at D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:35132:3
    at iterateNormalLoaders (D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:34958:10)
    at Array.<anonymous> (D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:34949:4)
    at runCallbacks (D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:24341:15)
    at D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:24514:4
    at D:\桌面\fastapi-ui-ant-P12\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:33829:16 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.18.0
Done in 17.70s.

原因分析

由于Node.js和OpenSSL兼容性问题，您在执行yarn start期间遇到了ERR_OSSL_EVP_UNSUPPORTED错误。这个错误通常出现在Node.js 17版本及更高版本中，原因是在OpenSSL 3.0中默认禁用了某些加密功能。

解决问题

1. 设置环境变量

错误可以通过设置一个环境变量来解决，这可以告诉Node.js使用OpenSSL 3.0的传统提供者功能。

在Windows上（命令行）：

set NODE_OPTIONS=--openssl-legacy-provider
yarn start

在Windows上（Powershell）：

$env:NODE_OPTIONS="--openssl-legacy-provider"
yarn start

在macOS或Linux上：

export NODE_OPTIONS=--openssl-legacy-provider
yarn start

这会临时地为当前会话设置环境变量。如果这解决了问题，您可能希望在环境中永久设置此更改，或者将其包含在项目启动脚本中。

2. 更新包脚本

或者，您可以通过修改package.json脚本，在运行项目时包含此环境变量：

"scripts": {
  "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider umi dev",
  "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider umi build"
}

3. 升级或降级Node.js

如果上述解决方案不可行，考虑更改Node.js版本。早于17版本的Node.js版，或者最新的LTS版本，可能不会出现这个问题。

• 对于生产应用程序来说，降级到LTS版本（如16.x）可能是一个更稳定的解决方案。
• 如果您使用的是早期版本的Node.js，或者更高版本可能仍存在与OpenSSL 3.0相关的未解决问题，请考虑升级到最新的LTS版本。