Problem Description:
Created a react project using the latest npx create-react-app my-app
When starting with npm start, an error is reported:
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.<anonymous> (/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
Solution:
set environment variables
In ubuntu, you can add this line to ~/.bashrc:
export NODE_OPTIONS=--openssl-legacy-provider
You can also set NODE_OPTIONS=--openssl-legacy-provider npm start every time you execute npm start