本地React应用启动报错error:0308010C:digital envelope routines::unsupported求助

问题详情 #

执行npm run start启动本地React应用时，服务器突然崩溃，抛出如下错误：

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/webpack/lib/util/createHash.js:90:53)
    at NormalModule._initBuildHash (/Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/webpack/lib/NormalModule.js:386:16)
    at handleParseError (/Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/webpack/lib/NormalModule.js:434:10)
    at /Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/webpack/lib/NormalModule.js:466:5
    at /Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/webpack/lib/NormalModule.js:327:12
    at /Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
/Users/parasnagpal0707/Documents/Projects/StalkHub/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:133:10)
    at module.exports (/Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/webpack/lib/util/createHash.js:90:53)
    at NormalModule._initBuildHash (/Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/webpack/lib/NormalModule.js:386:16)
    at /Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/webpack/lib/NormalModule.js:418:10
    at /Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/webpack/lib/NormalModule.js:293:13
    at /Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/parasnagpal0707/Documents/Projects/StalkHub/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/parasnagpal0707/Documents/Projects/StalkHub/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'
}

项目依赖配置：

{
  "name": "github-search",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@auth0/auth0-react": "^1.12.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.2.1",
    "fusioncharts": "^3.19.0",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-fusioncharts": "^4.0.0",
    "react-icons": "^4.7.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^5.0.1",
    "styled-components": "^5.3.6",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "CI= react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "webpack": "^5.79.0"
  }
}

已尝试方案：

• 将react-scripts改为legacy provider
• 多次执行npm audit --fix force
  问题仍未解决。

解决方案 #

方法1：临时启用OpenSSL兼容性模式 #

修改package.json中的scripts字段，添加NODE_OPTIONS=--openssl-legacy-provider环境变量：

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

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

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

react-scripts 5.0.1对Node.js 18的兼容性不足，升级到最新稳定版：

npm install react-scripts@latest --save

升级完成后重新执行npm run start。

方法3：切换Node.js版本到兼容版 #

使用nvm切换到Node.js 16（长期支持版，兼容性更好）：

nvm install 16
nvm use 16

切换版本后重新执行npm run start。

问题原因 #

Node.js 17及以上版本默认使用OpenSSL 3.0，而旧版webpack（或react-scripts依赖的webpack版本）使用的哈希算法在OpenSSL 3.0中被标记为不安全，导致兼容性错误。

内容的提问来源于stack exchange，提问作者Paras Nagpal