React项目执行npm start时出现ERR_OSSL_EVP_UNSUPPORTED错误求助

环境信息 #

• 系统：Windows 11
• 开发工具：VS Code
• Node.js版本：v20.5.1
• 项目：ZTM Web开发课程React模块项目（robofriends）
• 已尝试：ChatGPT及其他来源的解决方案，均无效

错误日志 #

执行npm start后出现以下错误：

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:138:10)
    at module.exports (C:\Users\cosby\robofriends\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (C:\Users\cosby\robofriends\node_modules\webpack\lib\NormalModule.js:401:16)
    at handleParseError (C:\Users\cosby\robofriends\node_modules\webpack\lib\NormalModule.js:449:10)
    at C:\Users\cosby\robofriends\node_modules\webpack\lib\NormalModule.js:481:5
    at C:\Users\cosby\robofriends\node_modules\webpack\lib\NormalModule.js:342:12
    at C:\Users\cosby\robofriends\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Users\cosby\robofriends\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (C:\Users\cosby\robofriends\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at C:\Users\cosby\robofriends\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (C:\Users\cosby\robofriends\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (C:\Users\cosby\robofriends\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (C:\Users\cosby\robofriends\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (C:\Users\cosby\robofriends\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at C:\Users\cosby\robofriends\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
C:\Users\cosby\robofriends\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:138:10)
    at module.exports (C:\Users\cosby\robofriends\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (C:\Users\cosby\robofriends\node_modules\webpack\lib\NormalModule.js:401:16)
    at C:\Users\cosby\robofriends\node_modules\webpack\lib\NormalModule.js:433:10
    at C:\Users\cosby\robofriends\node_modules\webpack\lib\NormalModule.js:308:13
    at C:\Users\cosby\robofriends\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\cosby\robofriends\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\cosby\robofriends\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\Users\cosby\robofriends\node_modules\babel-loader\lib\index.js:51:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

该错误源于Node.js v17+默认启用了更严格的OpenSSL算法，而旧版webpack/react-scripts不兼容导致，以下是几种可行的解决方法：

方法1：临时设置环境变量启动项目（Windows 11） #

在VS Code终端或系统PowerShell中，进入项目根目录执行：

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

方法2：修改package.json启动脚本 #

打开项目根目录的package.json，修改scripts中的启动命令：

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

保存后重新执行npm start即可。

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

使用nvm（Node版本管理器）将Node.js降级到v16.x长期支持版：

1. 安装nvm for Windows并完成配置
2. 打开终端执行：

   nvm install 16.20.2
   nvm use 16.20.2
   

3. 执行node -v确认版本为v16.20.2后，运行npm start

方法4：升级react-scripts版本 #

若项目基于create-react-app，升级react-scripts至兼容Node.js v20的版本：

npm install react-scripts@latest

升级完成后执行npm start

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