React项目npm start报错：process.binding('http_parser')弃用及加密算法不支持

执行npm start启动React项目时出现如下报错：

(node:5132) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:140:10)
    at module.exports (D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\webpack\lib\NormalModule.js:386:16)
    at handleParseError (D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\webpack\lib\NormalModule.js:434:10)
    at D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\webpack\lib\NormalModule.js:466:5
    at D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\webpack\lib\NormalModule.js:327:12
    at D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\react-scripts\scripts\start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:140:10)
    at module.exports (D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\webpack\lib\NormalModule.js:386:16)
    at D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\webpack\lib\NormalModule.js:418:10
    at D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\webpack\lib\NormalModule.js:293:13
    at D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at D:\Web Development\Projects\Warehouse-Management\warehouse-management-client\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 v19.7.0

已尝试的操作：

• 删除重装node_modules和react-scripts
• 卸载部分依赖
• 重启项目
• 更新Node.js版本

以上操作均未解决问题，寻求有效方案。

临时快速修复 #

方法1：通过环境变量启动 #

根据操作系统执行对应命令：

• Windows（CMD）：

  set NODE_OPTIONS=--openssl-legacy-provider && npm start
  

• Windows（PowerShell）：

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

• Linux/macOS：

  NODE_OPTIONS=--openssl-legacy-provider npm start
  

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

直接修改项目package.json的scripts字段：

{
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

修改后执行npm start即可。

长期稳定修复 #

方法1：降级Node.js到兼容版本 #

该报错源于Node.js 17+默认启用了新OpenSSL算法，与旧版webpack/react-scripts不兼容。可降级到Node.js 16.x LTS版本：

1. 用nvm安装16.x版本：

   nvm install 16
   

2. 切换到该版本：

   nvm use 16
   

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

   rm -rf node_modules package-lock.json
   npm install
   npm start
   

方法2：升级react-scripts到最新版 #

新版react-scripts已修复该兼容问题，执行升级命令：

npm install react-scripts@latest

完成后执行npm start尝试启动。

内容的提问来源于stack exchange，提问作者Khaled Bin Setab