Create React App build scripts fail on Node.js 17+ due to OpenSSL 3.0 changes that deprecated certain cryptographic algorithms used by Webpack 4. The build works fine on Node 16 but crashes with ERR_OSSL_EVP_UNSUPPORTED on newer versions.
This error occurs because Node.js 17 introduced OpenSSL 3.0, which removed support for legacy cryptographic algorithms including the MD4 hash algorithm. Create React App (CRA) projects that use older versions of react-scripts rely on Webpack 4, which uses these deprecated algorithms for certain operations like generating content hashes. When you run `npm run build` or `npm start` on Node 17 or later, Webpack attempts to use these unsupported algorithms and Node.js throws the ERR_OSSL_EVP_UNSUPPORTED error, causing the build to fail immediately. This is specifically a compatibility issue between older CRA tooling and modern Node.js versions. The same application builds successfully on Node 16 because that version still uses OpenSSL 1.1.1, which supports the legacy algorithms.
First, confirm you're using Node 17 or later:
node --versionIf the version is 17.x or higher, this is likely the cause of the error.
The fastest solution is to modify your package.json scripts to use the legacy OpenSSL provider:
{
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build"
}
}Then run your build again:
npm run buildThis tells Node.js to use the legacy cryptographic algorithms that Webpack 4 expects.
For a long-term solution, upgrade react-scripts which includes Webpack 5 and is compatible with Node 17+:
npm install react-scripts@latestAfter upgrading, you can remove the --openssl-legacy-provider flag from your scripts. Note that upgrading react-scripts may require resolving breaking changes in your code.
If you cannot update dependencies immediately, downgrade to Node 16:
Using nvm (recommended):
nvm install 16
nvm use 16Or download Node 16 LTS directly from the official Node.js website. This is a temporary workaround since Node 16 reached end-of-life in September 2023.
If you need a quick fix for CI/CD pipelines without modifying package.json, set the NODE_OPTIONS environment variable:
Linux/macOS:
export NODE_OPTIONS=--openssl-legacy-provider
npm run buildWindows Command Prompt:
set NODE_OPTIONS=--openssl-legacy-provider && npm run buildWindows PowerShell:
$env:NODE_OPTIONS="--openssl-legacy-provider"; npm run buildFor GitHub Actions, add to your workflow file:
env:
NODE_OPTIONS: --openssl-legacy-providerImportant: Do not set NODE_OPTIONS globally in your system environment variables, as this flag is not allowed in the NODE_OPTIONS environment variable in some contexts and may cause other issues.
Why This Happens
Webpack 4 uses the MD4 hash algorithm for generating content hashes in various scenarios, particularly for module identifiers and chunk hashing. When Node.js 17 switched to OpenSSL 3.0, MD4 was removed from the default set of available algorithms due to security concerns (MD4 is considered cryptographically broken).
Security Considerations
Using --openssl-legacy-provider re-enables these legacy algorithms system-wide for your Node.js process. While this is safe for development builds (the hashes aren't used for security purposes), it's a workaround rather than a proper fix. The better approach is updating to react-scripts 5.0+ which uses Webpack 5 and modern hashing algorithms.
Webpack 5 Migration
React Scripts 5.0.0 upgraded to Webpack 5, which uses more modern hashing algorithms (SHA-256 by default) that are supported in OpenSSL 3.0. If you're maintaining an older CRA project, consider following the official migration guide or ejecting and manually upgrading Webpack.
Alternative Build Tools
If you're starting a new React project, consider using modern alternatives to Create React App that are actively maintained and compatible with the latest Node.js versions:
- Vite (recommended for new projects)
- Next.js (for full-stack React applications)
- Remix (for modern React framework)
These tools have better performance and are designed to work with current Node.js releases.
Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
Rollup failed to resolve import during build
How to fix "Rollup failed to resolve import" in React