v5 used to include polyfills for node.js core modules by default

Describe the bug

Compiled with problems

Did you try recovering your dependencies?

yarn --version
1.22.15

Which terms did you search for in User Guide?

react-scripts 5 webpack Module not found: Error: Can't resolve 'fs'

Environment

npx create-react-app --info

Environment Info:

  current version of create-react-app: 5.0.0
  running from /Users/xxx/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 12.0.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Binaries:
    Node: 16.13.0 - /usr/local/Cellar/node@16/16.13.0/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/Cellar/node@16/16.13.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.93
    Edge: Not Found
    Firefox: 94.0.1
    Safari: 15.1
  npmPackages:
    react:  17.0.2 
    react-dom:  17.0.2 
    react-scripts:  5.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

In a project with react-scripts v5.0.0

yarn add -D dotenv
yarn start

Expected behavior

Actual behavior

ERROR in ../../node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs' in '../node_modules/dotenv/lib'
 @ ./src/config.ts 5:0-28 8:0-13
 @ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60

ERROR in ../../node_modules/dotenv/lib/main.js 26:13-28
Module not found: Error: Can't resolve 'path' in '../node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }
 @ ./src/config.ts 5:0-28 8:0-13
 @ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60

ERROR in ../../node_modules/dotenv/lib/main.js 28:11-24
Module not found: Error: Can't resolve 'os' in '../node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }
 @ ./src/config.ts 5:0-28 8:0-13
 @ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

Some useful comments:

dependency aliases

react-app-rewired config

@craco/craco config

hacking react-scripts with patch-package

I have the same issue as well

me too

Webpack 5 no longer shims node builtin packages. Its a breaking change.

I try to upgrade from v4.0.3 to 5.0.0 and It raise up the same error

Compiled with problems:

ERROR in ./src/App.js 1:40-111

Module not found: Error: You attempted to import /home/xxx/web/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

Webpack 5 no longer shims node builtin packages. Its a breaking change.

Are we meant to eject for every app that relies on node builtin packages? Won't that be most production apps, since you will invariably import a node module that relies on this functionality

My personal view:
I personally consider it bad practice to include code in the front-end that was ment for back-end usage.
From my experience:
I've seen developers of any experienced try adding back-end npm packages on the front-end.

In Npm there is no clear difference to help out developers, it's "Node Packages" not "Browser Packages"

Package maintainers should ideally build node or browser specific bundles.

Again this is my personal view I support the move in Webpack, I'll of course bring it up in the maintainer group.

(Also see the release notes regarding webpack 5 - there's a note regarding this breaking change for further details)

For now it would be helpful to collect examples of front-end packages suffering from this issue.
(The examples would help us reevaluate the decision)

Our two main usages are:

zlib
crypto

Our back-end compresses some of its data to optimize storage as well as network transfer. Our UI then uses zlib to uncompress it.
Our UI can also login using OAuth and it uses the crypto randomBytes and createHash methods to generate data for that authorization

Webpack has some output about providing a fallback resolution, what's the correct way to supply that since we don't have access to the actual webpack config?

To toss in another example, the v5 upgrade showed me that the libraries for AWS Cognito use url:

> yarn build
Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'url' in '/path/to/app/.yarn/cache/@aws-amplify-core-npm-4.3.10-e9277c22ab-77b7fe62d8.zip/node_modules/@aws-amplify/core/lib-esm'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
	- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "url": false }
>

If you were a direct user of webpack v4, upgrading to v5, you have a few options:

stay on v4
remove usage of polyfilled modules
add polyfills

If I were in this situation, I'd be taking option 3. But as I understand it, that's not available today with non-ejected CRA.

It'd be nice if Webpack 5 had a single switch to flip, to restore v4's polyfill behavior. Then CRA could expose just that one switch. But there isn't: Webpack's migration guidance is to manually add polyfills to your webpack config.

https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed

Here are the polyfills that were formerly provided by webpack (note that the project is deprecated): https://github.com/webpack/node-libs-browser

..so what should CRA do?

I've added a pr to gather feedback #11764

Same issue here. is there some documentation that we can follow for doing this migration?

I'm not sure it's entirely a polyfill issue. I'm getting the Can't resolve 'fs' due to Handlebars, which (IIRC) should have been prevented by its browser setting in package.json.

@LukeNotable

@LukeNotable thanks, interesting finding - I'll convert #11764 to a draft for now - would be great if it's an issue in the webpack config not resolving main fields correctly ref config: https://webpack.js.org/configuration/resolve/#resolvemainfields - will try to replicate

The issue is tied to the version of react-scripts you are using. v5 has an issue as it excludes support for some node features and polyfills that were available in lower versions.

Your quick fix is to take react scripts down to v4 until a fix for v5 is in place unless you are comfortable with: 1) ejecting your app; 2) adding the webpack config changes that are needed.

https://web3auth.io/docs/troubleshooting/webpack-issues#react-create-react-app

that solved it, nothing further

https://web3auth.io/docs/troubleshooting/webpack-issues#react-create-react-app

that solved it, nothing further

Thanks Ebrahim ! After testing a lot of solutions, only this one wordked for me.

@Ebrahim-Ramadan

https://web3auth.io/docs/troubleshooting/webpack-issues#react-create-react-app

that solved it, nothing further

Solved it for me. Thanks @Ebrahim-Ramadan

@ljharb

Found another solution for the issue for folks who didn't like any of the above including me.

For example for crypto,

Create a folder called crypto

Create package.json under crypto folder and configure like this:

{
  "browser": "client.js",
  "main": "server.js",
  "types": "index.d.ts" // optional
}

Create a file crypto/client.js

// crypto/client.js
module.exports = window.crypto

Create a file crypto/server.js (edited snippet according to @ljharb, thanks)
```
// crypto/server.js
module.exports = require("crypto").webcrypto
```

Now import crypto folder you just created. Hope it makes sense.

@hoiekim

@hoiekim those aren't the same APIs; you'd need require('crypto').webcrypto to make them the same.

https://web3auth.io/docs/troubleshooting/webpack-issues#react-create-react-app

that solved it, nothing further

Wow that solved the issue! Thanks a lot Ebrahim!

hahhahahahahahaha ITS STILL OPEN!

There is no immediate solution for this. A more dev friendly solution might be to provide an alternative version that does include the node packages, so we can avoid the complex "solutions" we have right now.

this is crazy. CRAZY. but I can see this team is much like the flowjs team -- release a product into opensource but don't give a damn how it affects the clients when you make a breaking change with no reasonable way for current users to backout.

UP

How not hate react

2025 still an issue

Just use node 20.19.4. That solved the issue for me

Fix Netlify build: Upgrade to Node 20, replace node-sass with sass

Navigation Menu

Repository navigation

v5 used to include polyfills for node.js core modules by default #11756

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

287 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

v5 used to include polyfills for node.js core modules by default #11756

Description

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Activity

arjshiv commented on Dec 15, 2021

FeiFanLiang commented on Dec 15, 2021

raix commented on Dec 15, 2021

zfarhad commented on Dec 15, 2021

AdnanDervisevic commented on Dec 15, 2021

raix commented on Dec 15, 2021

sean-daley commented on Dec 15, 2021

dylantf commented on Dec 15, 2021

jrr commented on Dec 15, 2021

raix commented on Dec 15, 2021

BiancaArtola commented on Dec 15, 2021

LukeNotable commented on Dec 15, 2021

raix commented on Dec 15, 2021

287 remaining items

Ebrahim-Ramadan commented on Jul 24, 2023

Ebrahim-Ramadan commented on Jul 24, 2023

robothoustra commented on Sep 3, 2023

sohamzycus commented on Oct 14, 2023

hoiekim commented on Dec 29, 2023

ljharb commented on Dec 29, 2023

noraliucode commented on Jan 19, 2024

blueforesticarus commented on Feb 26, 2024

zxcfer commented on Apr 3, 2024

keithgabryelski commented on Apr 20, 2024

vladdg-dev commented on Jul 31, 2024

seyacat commented on Dec 4, 2024

yackermann commented on Jun 7, 2025

liebestraumm commented on Aug 4, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions