This error occurs when running Create React App projects with Node.js 17 or later due to breaking changes in OpenSSL 3.0. Webpack 4 (used by react-scripts 4.x) relies on the MD4 hashing algorithm, which is no longer supported by default in modern Node.js versions.
This error indicates an incompatibility between Node.js 17+ (which uses OpenSSL 3.0) and older versions of Webpack (particularly Webpack 4). OpenSSL 3.0 deprecated and disabled several cryptographic algorithms by default, including the MD4 hash algorithm that Webpack 4 used in its build process for module hashing. When you try to start or build a Create React App project using react-scripts version 4.x or lower with Node.js 17+, the build process fails because Webpack attempts to use MD4 for content hashing, but Node.js refuses to perform this operation due to the security changes in OpenSSL 3.0. This is a compatibility issue between your Node.js version and your project's build tooling, not a problem with your application code itself.
The best long-term solution is to upgrade react-scripts, which includes Webpack 5 and doesn't rely on MD4:
npm install react-scripts@latestOr if using Yarn:
yarn add react-scripts@latestAfter upgrading, test your application:
npm startThis solution fixes the root cause by using a build tool compatible with modern Node.js versions.
If you cannot upgrade react-scripts immediately, enable OpenSSL's legacy provider mode. Update your package.json scripts:
{
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build"
}
}Then run your scripts normally:
npm startImportant: The flag must come before the command (e.g., --openssl-legacy-provider start, not start --openssl-legacy-provider).
Alternatively, set the NODE_OPTIONS environment variable before running commands.
On Linux/macOS:
export NODE_OPTIONS=--openssl-legacy-provider
npm startOn Windows (Command Prompt):
set NODE_OPTIONS=--openssl-legacy-provider
npm startOn Windows (PowerShell):
$env:NODE_OPTIONS="--openssl-legacy-provider"
npm startYou can also add this to your .env file in Create React App:
NODE_OPTIONS=--openssl-legacy-providerNote that some environments may not allow this flag in NODE_OPTIONS for security reasons.
If other solutions are not viable for your project, downgrade to Node.js 16 (the last LTS version before the OpenSSL 3.0 change).
Using nvm (Node Version Manager):
nvm install 16
nvm use 16Then verify the version:
node --version
# Should show v16.x.xThis is a temporary workaround, as Node.js 16 will eventually reach end-of-life. Plan to upgrade your build tools for long-term support.
Why MD4 was removed: OpenSSL 3.0 deprecated MD4 and other legacy algorithms because they are cryptographically weak and vulnerable to collision attacks. While Webpack's use of MD4 for content hashing is not a security risk (it's not being used for cryptographic security), the OpenSSL maintainers removed it from the default providers to encourage migration to modern algorithms.
Webpack 5 changes: Webpack 5 switched to using MD4 only when explicitly configured, and defaults to more secure hashing algorithms. This is why upgrading react-scripts (which bundles Webpack 5) resolves the issue.
Production builds: This error affects both development and production builds. If your CI/CD pipeline suddenly fails with this error, check the Node.js version being used in your build environment.
Performance impact of --openssl-legacy-provider: Using the legacy provider flag has minimal performance impact, but it re-enables deprecated cryptographic algorithms system-wide for your Node.js process. While acceptable as a temporary fix, upgrading your build tools is the more secure long-term approach.
Package-lock.json considerations: When upgrading react-scripts, you may need to delete node_modules and package-lock.json (or yarn.lock) and reinstall dependencies to ensure all transitive dependencies are properly updated.
ejected projects: If you've ejected from Create React App, you'll need to manually upgrade Webpack to version 5 in your package.json and update your webpack configuration accordingly. This is more complex than the solutions above.
Prop spreading could cause security issues
Prop spreading could cause security issues
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
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency