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:)

1. create new react app with create-react-app and node 14
2. do npm run build to see it builds completely fine
3. 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

[trashcoder]

in your package.json: change this line "build": "react-scripts start", to "build": "react-scripts --openssl-legacy-provider build",

[KiraLT]

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:

{
    "scripts": {
        "build": "if-node-version '>= 17' && react-scripts --openssl-legacy-provider build || react-scripts build",
    }
}