create-react-app: react-scripts fails to build project with Node 17
Describe the bug
we have a CRA app, it used to build with Node 14.x very fine, today I upgrade nodejs to 17.0.0 and it failed. (in both my local machine and the CI-CD machine)
And these were the logs:
> react-scripts build
Creating an optimized production build...
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/my-project/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/my-project/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/my-project/node_modules/webpack/lib/NormalModule.js:471:10)
at /my-project/node_modules/webpack/lib/NormalModule.js:503:5
at /my-project/node_modules/webpack/lib/NormalModule.js:358:12
at /my-project/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/my-project/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/my-project/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /my-project/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at runSyncOrAsync (/my-project/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
at iterateNormalLoaders (/my-project/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at Array.<anonymous> (/my-project/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/my-project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /my-project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
/my-project/node_modules/react-scripts/scripts/build.js:19
throw err;
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/my-project/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/my-project/node_modules/webpack/lib/NormalModule.js:417:16)
at /my-project/node_modules/webpack/lib/NormalModule.js:452:10
at /my-project/node_modules/webpack/lib/NormalModule.js:323:13
at /my-project/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /my-project/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/my-project/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /my-project/node_modules/babel-loader/lib/index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v17.0.0
ERROR: Job failed: exit status 1
Did you try recovering your dependencies?
yes. in both local machine and CI-CD machine I re-installed all the dependencies
Which terms did you search for in User Guide?
I searched Google for error:0308010C:digital envelope routines::unsupported
with and without the 0308010C
part
Environment
current version of create-react-app: 4.0.3
running from /home/.npm/_npx/34113/lib/node_modules/create-react-app
System:
OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
CPU: (4) x64 Intel(R) Core(TM) i5-4460 CPU @ 3.20GHz
Binaries:
Node: 17.0.0 - /usr/bin/node
Yarn: Not Found
npm: 8.1.0 - /usr/bin/npm
Browsers:
Chrome: 95.0.4638.54
Firefox: 93.0
npmPackages:
react: ^16.13.1 => 16.13.1
react-dom: ^16.13.1 => 16.13.1
react-scripts: ^4.0.3 => 4.0.3
npmGlobalPackages:
create-react-app: Not Found
Steps to reproduce
(Write your steps here:)
- create new react app with create-react-app and node 14
- do
npm run build
to see it builds completely fine - upgrade to node 17 and do
npm run build
again to see it fail
Expected behavior
to build flawlessly
Actual behavior
The build failed with errors printed above!
Note
I know that it is mostly not related to create-react-app, but another package, maybe webpack or it’s dependencies. But as I cannot dig down, I write this issue here so the professionals can track it further.
Thanks
About this issue
- Original URL
- State: open
- Created 3 years ago
- Reactions: 36
- Comments: 27 (1 by maintainers)
Links to this issue
Commits related to this issue
- docs: update node install to use nodejs-lts — committed to PaulB-H/react-native-website by PaulB-H 3 years ago
- fix https://github.com/facebook/create-react-app/issues/11562 — committed to eduardoworrel/Onde-estou-no-Brasil by deleted user 2 years ago
- Support Node 17 or higher for development Node 17 fixed a security issue related to crypto which is incompatible with the current default settings of webpack used via react-scripts. This is unfortuna... — committed to longsleep-io/lico by longsleep a year ago
- Support Node 17 or higher for development Node 17 fixed a security issue related to crypto which is incompatible with the current default settings of webpack used via react-scripts. This is unfortuna... — committed to libregraph/lico by longsleep a year ago
- Add a temporary workaround to get building on Node 18 since Node 16 EOL is 2023-09-11 This does the following: * Add NODE_OPTIONS=--openssl-legacy-provider (not needed once we upgrade to react-scri... — committed to facebook/OSM-HOT-Tasking-Manager by tsmock 10 months ago
in your package.json: change this line
"build": "react-scripts start",
to"build": "react-scripts --openssl-legacy-provider build",
Doing this results in a
bad option: --openssl-legacy-provider
error in Node 16. So this isn’t a workaround projects can actually use in theirscripts
unless they have absolute control over the version of Node everyone uses and can prohibit use of LTS versions by anyone.The only real fix will likely be the release of CRA v5.
If you need to support both 17 and older NodeJS versions you can use if-node-version to execute different commands for different NodeJS versions:
It work Thanks.
“scripts”: { “start”: “react-scripts --openssl-legacy-provider start”, “build”: “react-scripts --openssl-legacy-provider build”, “test”: “react-scripts test”, “eject”: “react-scripts eject” },
Looks like this has been fixed.
I tested out the
@next
version of CRA v5. It seems there may be some more work required in order to make Node 17 work.I’m still getting this error but now it’s due to CRA v5 still using
file-loader
. The implication in the WebPack thread on Node 17 is thatfile-loader
is obsolete and the fix tofile-loader
breaking Node 17 is to not usefile-loader
because it’s no longer supported.We may need #11213 before CRA v5 will work on Node 17.
Actually it seems that this won’t necessarily fix the issue alone. WebPack does plan to change the default hash function in WebPack 6 but cannot change it in 4 or 5.
CRA needs to change the
hashFunction
and make a release. Though given CRA v4 hasn’t received an update since Feb and CRA has other issues with Node 17 (#11565) I presume we’ll only get that fix in CRA v5,This looks like a relevant discussion related to this issue: https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported
Merged #11597 just before, and currently testing on local computer.
Having the same issue. Node
16.11.1
works but17.0.0
and17.0.1
are causing this error.On MBP w/M1, running Node v17, to run React with
npm start
I had to change my start script to"start": "react-scripts --openssl-legacy-provider start"
. But when I try to runnpm run deploy
, it reads"/opt/homebrew/Cellar/nvm/0.38.0/versions/node/v16.13.0/bin/node: bad option: --openssl-legacy-provider"
I tried
"react-scripts --openssl-legacy-provider build"
and it does not work. Switched toNode v16.13.0
and it works as it came upon initialization."start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts build",
Pretty annoying, but hey, I’ve heard things change all the change in this industry and a few months from now, someone will see this comment and things will be different then as well.
for react-app-rewired use it like this
"start": "react-app-rewired --openssl-legacy-provider start ",
11562
CRA is now a tech debt.
why not to pass to webpack config to use some modern hash function instead of deprecated md4 https://webpack.js.org/configuration/output/#outputhashfunction ?
Could be fixed by #11597
This is Paulk58 Whatsapp wallet re-created on 10 th November 2023
Kinding58 Wallet has been created successfully
Hell
Thanks Pat! That worked for me also.
Yes @Gnito that’s it I think. So it is probably either Webpack’s to update something, or react-scripts’ to change some config, right?