React项目执行npm start报错：digital envelope routines are unsupported求助

问题原因 #

Node.js 18.16.0默认采用OpenSSL 3.0，该版本废弃了MD4等老旧哈希算法；而你的React项目（大概率基于create-react-app v4及更早版本创建）的webpack配置默认使用MD4作为哈希算法，两者不兼容导致启动时抛出该异常。

解决办法 #

临时快速修复 #

修改package.json中的start命令，临时指定Node.js使用旧版OpenSSL提供器：

• macOS/Linux：

  "scripts": {
    "start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start"
  }
  

• Windows（CMD）：

  "scripts": {
    "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start"
  }
  

• Windows（PowerShell）：

  "scripts": {
    "start": "$env:NODE_OPTIONS='--openssl-legacy-provider'; react-scripts start"
  }
  

修改后执行npm start即可启动项目。

永久根治方案（推荐） #

1. 升级react-scripts到最新版本
   新版本的create-react-app（v5及以上）已经适配了Node.js 18+的OpenSSL 3.0，执行以下命令升级：

   npm install react-scripts@latest
   

升级完成后重新运行npm start即可。

2. 手动修改webpack配置（适用于无法升级react-scripts的场景）
   • 如果项目未暴露webpack配置，先执行npm run eject暴露配置（该操作不可逆）
   • 在项目根目录找到webpack配置文件（通常是webpack.config.js或config/webpack.config.js），修改哈希算法配置：

     module.exports = {
       // ...其他原有配置
       output: {
         // ...其他output配置
         hashFunction: 'sha256' // 将MD4替换为sha256
       },
       optimization: {
         moduleIds: 'deterministic',
         chunkIds: 'deterministic'
       }
     }
     

   修改保存后重新启动项目即可。

内容的提问来源于stack exchange，提问作者Talha Munir