webpack react npm start报错解决 ERR_OSSL_EVP_UNSUPPORTED

问题描述：

使用最新的npx create-react-app my-app创建了个react项目

使用npm start启动就报错了：

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 (/data2/github/frontend/react/wasm-image-map/node_modules/webpack/lib/util/createHash.js:90:53)
    at NormalModule._initBuildHash (/data2/github/frontend/react/wasm-image-map/node_modules/webpack/lib/NormalModule.js:386:16)
    at handleParseError (/data2/github/frontend/react/wasm-image-map/node_modules/webpack/lib/NormalModule.js:434:10)
    at /data2/github/frontend/react/wasm-image-map/node_modules/webpack/lib/NormalModule.js:466:5
    at /data2/github/frontend/react/wasm-image-map/node_modules/webpack/lib/NormalModule.js:327:12
    at /data2/github/frontend/react/wasm-image-map/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/data2/github/frontend/react/wasm-image-map/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/data2/github/frontend/react/wasm-image-map/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /data2/github/frontend/react/wasm-image-map/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/data2/github/frontend/react/wasm-image-map/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/data2/github/frontend/react/wasm-image-map/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array. (/data2/github/frontend/react/wasm-image-map/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/data2/github/frontend/react/wasm-image-map/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /data2/github/frontend/react/wasm-image-map/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
/data2/github/frontend/react/wasm-image-map/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 (/data2/github/frontend/react/wasm-image-map/node_modules/webpack/lib/util/createHash.js:90:53)
    at NormalModule._initBuildHash (/data2/github/frontend/react/wasm-image-map/node_modules/webpack/lib/NormalModule.js:386:16)
    at /data2/github/frontend/react/wasm-image-map/node_modules/webpack/lib/NormalModule.js:418:10
    at /data2/github/frontend/react/wasm-image-map/node_modules/webpack/lib/NormalModule.js:293:13
    at /data2/github/frontend/react/wasm-image-map/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /data2/github/frontend/react/wasm-image-map/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/data2/github/frontend/react/wasm-image-map/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /data2/github/frontend/react/wasm-image-map/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 v18.12.0
 

解决方法：

设置环境变量

在ubuntu下可以把这行添加到~/.bashrc里：

export NODE_OPTIONS=--openssl-legacy-provider

也可以每次执行npm start时设置 NODE_OPTIONS=--openssl-legacy-provider npm start