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

[damozhang]

trafficstars

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

1. yarn add -D dotenv
2. 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

[arjshiv]

I have the same issue as well

[FeiFanLiang]

me too

[raix]

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

[zfarhad]

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/.

[AdnanDervisevic]

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

[raix]

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)

[sean-daley]

Our two main usages are:

1. zlib
2. 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

[dylantf]

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?

[jrr]

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:

1. stay on v4
2. remove usage of polyfilled modules
3. 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?

[raix]

I've added a pr to gather feedback #11764

[BiancaArtola]

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

[LukeNotable]

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.

[raix]

@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

[jasonleehodges]

@zfarhad I had the same issue. Found out it was because I had Storybook as a dependency and it was using Webpack 4. Upgrading Storybook to use their new alpha version that supports Webpack 5 fixed me. So I would say, make sure none of your dependencies are using a conflicting version of webpack.

[raix]

@LukeNotable when importing 'handlebars/runtime' webpack seem to resolve correctly but if importing 'handlebars' it resolves to 'lib/index.js'

''' "browser": { ".": "./dist/cjs/handlebars.js", "./runtime": "./dist/cjs/handlebars.runtime.js" }, ''' I'll take a second look tomorrow, could be a config issue in CRA

[German919]

ERROR in Plugin "react" was conflicted between "package.json » eslint-config-react-app. Estoy teniedo este error y no encuentro como solucionarlo..

[jordanwilking]

Fwiw, seeing this for a package trying to use assert and stream-browserify.

[raix]

Webpack 5 and CRA v5 don't add fallbacks for nodejs modules any more, it's a breaking change - dotenv should not be added in the browser code related issues closed in dotenv repo

Migration steps from v4 to v5:

A: Go to the Npm or Github readme for the package you are trying to use and see if the package is meant to run in the browser

• If no - Then remove the package and find an alternative package better suited

B: Search in the package Github issues for "browser" and include closed issues, please. Example for DotEnv repo

• If the maintainers multiple times state that the package is NOT meant for usage in the front-end and close the issues - Then remove the package and find an alternative package better suited

C: If the package should support the browser - then open an issue here in the CRA repo and we'll look into it - here to help!

An example: @LukeNotable raised an issue - we've confirmed that as an issue, debugged and opened an issue in the Webpack repository. Please note a very important detail regarding the handlebars package:

1. It provides a main field "browser" and bundle files specific to the browser
2. import "handlebars/runtime" resolves in the browser code
3. import "handlebars" resolves NodeJS version... Adding fallbacks for nodejs builtins would hide this issue

We have opened an issue in Webpack https://github.com/webpack/webpack/issues/15007

Sorry for the breaking change, but we are trying to keep you safe - we are considering better error message / documentation etc.

Kind regards Morten

[lanwin]

Uh my guess is that this means a lot people can not upgrade to v5 for a long time. In example our own deps report 50 errors cause nodes assert ist used in various deps.

[dylantf]

"Then remove the package and find an alternative package better suited" is a great strategy when you have an unlimited budget, but in many cases these packages work just fine in the browser with a polyfill, and sometimes packages in the JS ecosystem go unmaintained and there aren't any good alternatives. If Webpack 5 has an option to include the polyfills, but CRA does not, are we just expected to immediately eject upon upgrading to edit the webpack config, or just stay on CRA 4?

[raix]

We need to make sure that we are fixing the root cause and not the symptom - like with the handlebars example above e.g. There might be an issue in Webpack https://github.com/webpack/webpack/issues/15007 - let's evaluate if that fixes most of the errors.

To repeat https://github.com/facebook/create-react-app/issues/11756#issuecomment-994982058 we a considering adding an escape hatch and document why not to use it #11764

Again - if you are using packages not meant for the browser - and the maintainers of those packages keep closing issues for browser support and state that the package is not meant for the browser, then it's likely a good idea to find another package that supports the browser.

For more details on what nodejs builtin modules are see the nodejs api docs

[Loque18]

same issue here with web3 js :/

[raix]

I've added a pull-request with a suggestion for an "escape hatch" - still waiting for the webpack team to confirm/deny the handlebars issue - let me know what you think https://github.com/facebook/create-react-app/pull/11764

[fanmingfei]

Same issue here with PixiJS v4

[ratracegrad]

npx create-react-app myApp cd myApp npm install web3 open App.js and add line import Web3 from 'web3' and you get errors related to the missing polyfills. Any suggestion on a workaround?

[kayrules]

I'm having similar issue earlier with CRA & web3. I fixed it by changing react-scriptsfrom 5.0.0 to version 4.0.3

[geektechniquestudios]

Same issue here with ethers js.

Module not found: Error: Can't resolve 'fs' in "node-env/file/path" Module not found: Error: Can't resolve 'path' in "node-env/file/path" Module not found: Error: Can't resolve 'os' in "node-env/file/path

Forced to use old version of react scripts, which in turn forces me to use an old version of tailwind :(

[Everen-John]

@kayrules 's solution works fine. the web3 package is currently unusable without downgrading react-scripts

[fernandocamargo]

I temporarily dealt with this by adding aliases to my dependencies. How bad is this solution?

Example:

"buffer": "^6.0.3",
"crypto": "npm:crypto-browserify",
"stream": "npm:stream-browserify",

[steveilyo]

I solved this issue by adding the fallback to my webpack.config.js file;

module.exports = {
    resolve: {
        fallback: {
            assert: require.resolve('assert'),
            crypto: require.resolve('crypto-browserify'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            os: require.resolve('os-browserify/browser'),
            stream: require.resolve('stream-browserify'),
        },
    },
};

using;

"dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2",
    "web3": "^1.6.1"
  },

but also need but got compilation errors on the build process:

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error

this was resolved by adding to my .env file;

GENERATE_SOURCEMAP=false

hope this helps.

[luke-pitch]

I solved this by modifying my webpack config. However I didn't need to eject my app as I'd already been using react-app-rewired to inject additional config - worth having a look for anyone needing to edit webpack config and not wanting to eject. This was the config setting: config.resolve.fallback = { fs: false, path: false }

[steveilyo]

You can create this in the src folder and react should pick it up. [image: Screenshot 2021-12-21 at 17.55.15.png]

the .env file is in the root.

On Tue, 21 Dec 2021 at 17:38, Ankit Kumar @.***> wrote:

I solved this issue by adding the fallback to my webpack.config.js file;

module.exports = { resolve: { fallback: { assert: require.resolve('assert'), crypto: require.resolve('crypto-browserify'), http: require.resolve('stream-http'), https: require.resolve('https-browserify'), os: require.resolve('os-browserify/browser'), stream: require.resolve('stream-browserify'), }, }, };

using;

"dependencies": { @./jest-dom": "^5.16.1", @./react": "^12.1.2", @.***/user-event": "^13.5.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.2", "web3": "^1.6.1" },

but also need but got compilation errors on the build process:

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error

this was resolved by adding to my .env file;

GENERATE_SOURCEMAP=false

hope this helps.

How do you access webpack.config.js file where is the location

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/11756#issuecomment-998970294, or unsubscribe https://github.com/notifications/unsubscribe-auth/AORFPCFPX5GJWJEQWFG4TA3USC3RDANCNFSM5KCLFL7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

-- Many Thanks Steve Winnington tel: 07810 026118 ln: steve-winnington https://www.linkedin.com/in/steve-winnington-305a0914

[ankitaryan404]

`Compiled with problems:

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in 'C:\Blockchain\lottery-React\node_modules\cipher-base'

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: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Blockchain\lottery-React\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can't resolve 'crypto' in 'C:\Blockchain\lottery-React\node_modules\web3-eth-accounts\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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Blockchain\lottery-React\node_modules\web3-eth-accounts\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26

Module not found: Error: Can't resolve 'http' in 'C:\Blockchain\lottery-React\node_modules\web3-providers-http\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: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28

Module not found: Error: Can't resolve 'https' in 'C:\Blockchain\lottery-React\node_modules\web3-providers-http\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: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in 'C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist'

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: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in 'C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist'

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: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can't resolve 'os' in 'C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist'

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 }

ERROR

src\App.js Line 4:1: Import in body of module; reorder to top import/first

Search for the keywords to learn more about each error.

`

This is my error how do i solve ???

[steveilyo]

`Compiled with problems:

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in 'C:\Blockchain\lottery-React\node_modules\cipher-base'

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: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Blockchain\lottery-React\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can't resolve 'crypto' in 'C:\Blockchain\lottery-React\node_modules\web3-eth-accounts\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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Blockchain\lottery-React\node_modules\web3-eth-accounts\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26

Module not found: Error: Can't resolve 'http' in 'C:\Blockchain\lottery-React\node_modules\web3-providers-http\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: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28

Module not found: Error: Can't resolve 'https' in 'C:\Blockchain\lottery-React\node_modules\web3-providers-http\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: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in 'C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist'

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: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in 'C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist'

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: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can't resolve 'os' in 'C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist'

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 }

ERROR

src\App.js Line 4:1: Import in body of module; reorder to top import/first

Search for the keywords to learn more about each error.

`

This is my error how do i solve ???

Try the suggested fix first....

[ankitaryan404]

I have tried by creating a webpack.config.js file in src folder as u suggested. But nothing works. I am trying this from 4 days . Ur help is much appreciated.

On Tue, Dec 21, 2021, 23:57 steveilyo @.***> wrote:

`Compiled with problems:

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in 'C:\Blockchain\lottery-React\node_modules\cipher-base'

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: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Blockchain\lottery-React\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can't resolve 'crypto' in 'C:\Blockchain\lottery-React\node_modules\web3-eth-accounts\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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Blockchain\lottery-React\node_modules\web3-eth-accounts\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26

Module not found: Error: Can't resolve 'http' in 'C:\Blockchain\lottery-React\node_modules\web3-providers-http\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: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28

Module not found: Error: Can't resolve 'https' in 'C:\Blockchain\lottery-React\node_modules\web3-providers-http\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: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in 'C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist'

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: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in 'C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist'

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: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can't resolve 'os' in 'C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist'

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 }

ERROR

src\App.js Line 4:1: Import in body of module; reorder to top import/first

Search for the keywords to learn more about each error.

`

This is my error how do i solve ???

Try the suggested fix first....

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/11756#issuecomment-999000685, or unsubscribe https://github.com/notifications/unsubscribe-auth/AN3DMOEBDWHXWI6OSYVFGELUSDBKBANCNFSM5KCLFL7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

[steveilyo]

It sounds like it’s not picking up the config.

On 21 Dec 2021, at 18:30, Ankit Kumar @.***> wrote:

 I have tried by creating a webpack.config.js file in src folder as u suggested. But nothing works. I am trying this from 4 days . Ur help is much appreciated.

On Tue, Dec 21, 2021, 23:57 steveilyo @.***> wrote:

`Compiled with problems:

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in 'C:\Blockchain\lottery-React\node_modules\cipher-base'

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: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Blockchain\lottery-React\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can't resolve 'assert' in 'C:\Blockchain\lottery-React\node_modules\ethereumjs-util\dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can't resolve 'crypto' in 'C:\Blockchain\lottery-React\node_modules\web3-eth-accounts\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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Blockchain\lottery-React\node_modules\web3-eth-accounts\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26

Module not found: Error: Can't resolve 'http' in 'C:\Blockchain\lottery-React\node_modules\web3-providers-http\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: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28

Module not found: Error: Can't resolve 'https' in 'C:\Blockchain\lottery-React\node_modules\web3-providers-http\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: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in 'C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist'

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: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in 'C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist'

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: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can't resolve 'os' in 'C:\Blockchain\lottery-React\node_modules\xhr2-cookies\dist'

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 }

ERROR

src\App.js Line 4:1: Import in body of module; reorder to top import/first

Search for the keywords to learn more about each error.

`

This is my error how do i solve ???

Try the suggested fix first....

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/11756#issuecomment-999000685, or unsubscribe https://github.com/notifications/unsubscribe-auth/AN3DMOEBDWHXWI6OSYVFGELUSDBKBANCNFSM5KCLFL7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

— Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you commented.

[Azkel]

@ankitaryan404 perhaps try this solution, as this one also worked for me:

I solved this by modifying my webpack config. However I didn't need to eject my app as I'd already been using react-app-rewired to inject additional config - worth having a look for anyone needing to edit webpack config and not wanting to eject. This was the config setting: config.resolve.fallback = { fs: false, path: false }

Please note that you need to install and configure react-app-rewired npm package.

My config-overrides.js file looks like this:

module.exports = function override(config, env) {
    config.resolve = {
        ...config.resolve,
        fallback: {
            vm: require.resolve('vm-browserify')
        }
    }
    return config
}

My broken dependency was vm-browserify, so I had to also install package for it. But for other polyfills it probably should work by following the same pattern.

[lnvestor]

…

maybe yeah same with me the webpack.config.js is on root how it's can't be picked

[ankitaryan404]

…

maybe yeah same with me the webpack.config.js is on root how it's can't be picked

i have tried both the way , but doesn't work. Can Anyone plz see the pic and give the solution. If I am doing anything wrong , then guide me . This would be appreciated

[steveilyo]

Looks like you are on windows, I'm on OSX so a bit different.

If you want to find webpack files and configurations go to your package.json file and look for scripts

[image: img]

You will find that scripts object is using a library react-scripts

This react-scripts/scripts and react-scripts/config folder should contain all the webpack configurations.

On Wed, 22 Dec 2021 at 10:50, Ankit Kumar @.***> wrote:

…

maybe yeah same with me the webpack.config.js is on root how it's can't be picked

[image: WhatsApp Image 2021-12-22 at 16 14 37] https://user-images.githubusercontent.com/58078776/147080655-97434a9b-632c-467f-9e58-07d336de38c2.jpeg [image: WhatsApp Image 2021-12-22 at 16 16 14] https://user-images.githubusercontent.com/58078776/147080918-e0680ed5-ab6b-4c3a-b00a-249f29e5e987.jpeg [image: WhatsApp Image 2021-12-22 at 16 17 06] https://user-images.githubusercontent.com/58078776/147080938-4aeb1d29-f0cd-4a05-8b55-b723c8584f19.jpeg

i have tried both the way , but doesn't work. Can Anyone plz see the pic and give the solution. If I am doing anything wrong , then guide me . This would be appreciated

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/11756#issuecomment-999476911, or unsubscribe https://github.com/notifications/unsubscribe-auth/AORFPCD3HI75VMPN2YW4OGDUSGUOHANCNFSM5KCLFL7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

-- Many Thanks Steve Winnington tel: 07810 026118 ln: steve-winnington https://www.linkedin.com/in/steve-winnington-305a0914

[steveilyo]

Arrhhh taking a second look I have my webpack in the src folder.

On Wed, 22 Dec 2021 at 10:50, Ankit Kumar @.***> wrote:

…

maybe yeah same with me the webpack.config.js is on root how it's can't be picked

[image: WhatsApp Image 2021-12-22 at 16 14 37] https://user-images.githubusercontent.com/58078776/147080655-97434a9b-632c-467f-9e58-07d336de38c2.jpeg [image: WhatsApp Image 2021-12-22 at 16 16 14] https://user-images.githubusercontent.com/58078776/147080918-e0680ed5-ab6b-4c3a-b00a-249f29e5e987.jpeg [image: WhatsApp Image 2021-12-22 at 16 17 06] https://user-images.githubusercontent.com/58078776/147080938-4aeb1d29-f0cd-4a05-8b55-b723c8584f19.jpeg

i have tried both the way , but doesn't work. Can Anyone plz see the pic and give the solution. If I am doing anything wrong , then guide me . This would be appreciated

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/11756#issuecomment-999476911, or unsubscribe https://github.com/notifications/unsubscribe-auth/AORFPCD3HI75VMPN2YW4OGDUSGUOHANCNFSM5KCLFL7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

-- Many Thanks Steve Winnington tel: 07810 026118 ln: steve-winnington https://www.linkedin.com/in/steve-winnington-305a0914

[ankitaryan404]

Arrhhh taking a second look I have my webpack in the src folder. … On Wed, 22 Dec 2021 at 10:50, Ankit Kumar @.> wrote: … maybe yeah same with me the webpack.config.js is on root how it's can't be picked [image: WhatsApp Image 2021-12-22 at 16 14 37] https://user-images.githubusercontent.com/58078776/147080655-97434a9b-632c-467f-9e58-07d336de38c2.jpeg [image: WhatsApp Image 2021-12-22 at 16 16 14] https://user-images.githubusercontent.com/58078776/147080918-e0680ed5-ab6b-4c3a-b00a-249f29e5e987.jpeg [image: WhatsApp Image 2021-12-22 at 16 17 06] https://user-images.githubusercontent.com/58078776/147080938-4aeb1d29-f0cd-4a05-8b55-b723c8584f19.jpeg i have tried both the way , but doesn't work. Can Anyone plz see the pic and give the solution. If I am doing anything wrong , then guide me . This would be appreciated — Reply to this email directly, view it on GitHub <#11756 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AORFPCD3HI75VMPN2YW4OGDUSGUOHANCNFSM5KCLFL7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you commented.Message ID: @.> -- Many Thanks Steve Winnington tel: 07810 026118 ln: steve-winnington https://www.linkedin.com/in/steve-winnington-305a0914

As you have seen in my pic I have tried both way But none of them had worked out

[steveilyo]

Try here: lottery-react/node_modules/react-scripts/config/webpack.config.js

or use react app rewired;

A great tutorial by Egghead.io using react-app-rewired here https://egghead.io/lessons/react-customize-create-react-app-cra-without-ejecting-using-react-app-rewired

On Wed, 22 Dec 2021 at 11:13, Ankit Kumar @.***> wrote:

Arrhhh taking a second look I have my webpack in the src folder. … <#m_8959180397848714403_> On Wed, 22 Dec 2021 at 10:50, Ankit Kumar @.> wrote: … maybe yeah same with me the webpack.config.js is on root how it's can't be picked [image: WhatsApp Image 2021-12-22 at 16 14 37] https://user-images.githubusercontent.com/58078776/147080655-97434a9b-632c-467f-9e58-07d336de38c2.jpeg https://user-images.githubusercontent.com/58078776/147080655-97434a9b-632c-467f-9e58-07d336de38c2.jpeg [image: WhatsApp Image 2021-12-22 at 16 16 14] https://user-images.githubusercontent.com/58078776/147080918-e0680ed5-ab6b-4c3a-b00a-249f29e5e987.jpeg https://user-images.githubusercontent.com/58078776/147080918-e0680ed5-ab6b-4c3a-b00a-249f29e5e987.jpeg [image: WhatsApp Image 2021-12-22 at 16 17 06] https://user-images.githubusercontent.com/58078776/147080938-4aeb1d29-f0cd-4a05-8b55-b723c8584f19.jpeg https://user-images.githubusercontent.com/58078776/147080938-4aeb1d29-f0cd-4a05-8b55-b723c8584f19.jpeg i have tried both the way , but doesn't work. Can Anyone plz see the pic and give the solution. If I am doing anything wrong , then guide me . This would be appreciated — Reply to this email directly, view it on GitHub <#11756 (comment) https://github.com/facebook/create-react-app/issues/11756#issuecomment-999476911>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AORFPCD3HI75VMPN2YW4OGDUSGUOHANCNFSM5KCLFL7Q https://github.com/notifications/unsubscribe-auth/AORFPCD3HI75VMPN2YW4OGDUSGUOHANCNFSM5KCLFL7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you commented.Message ID: @.> -- Many Thanks Steve Winnington tel: 07810 026118 ln: steve-winnington https://www.linkedin.com/in/steve-winnington-305a0914

As you have seen in my pic I have tried both way But none of them had worked out

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/11756#issuecomment-999492107, or unsubscribe https://github.com/notifications/unsubscribe-auth/AORFPCEEDHYKW7UHXDY74GDUSGXGJANCNFSM5KCLFL7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

-- Many Thanks Steve Winnington tel: 07810 026118 ln: steve-winnington https://www.linkedin.com/in/steve-winnington-305a0914

[LukeNotable]

Thanks @raix for going above & beyond looking into the handlebars issue!

For me, it was the only hiccup in an otherwise smooth upgrade to CRA 5, and the workaround is straightforward.

[valeryq]

Same problem with rsocket-core package. It uses Buffer for encode/decode messages.

ERROR in ./node_modules/rsocket-core/build/LiteBuffer.js 8:37-54
Module not found: Error: Can't resolve 'buffer' in '/Users/development/projects/falcon/backoffice/node_modules/rsocket-core/build'

[crecker05ru]

@steveilyo react-app-rewired helps in some case ,i resolve errors but now my view page not render XD After reviewing my app i found when i cathc error,somehow react-redux don't like my destructive import in actions-creators from reducer,i brought out constants in other folder and exported them from file,now it works.

[privatejava]

I somehow fixed it too using react-app-rewired Make sure you install this package and create new file config-overrides.js in your root directory

/* config-overrides.js */
const webpack = require('webpack');
module.exports = function override(config, env) {
    //do stuff with the webpack config...

    config.resolve.fallback = {
        url: require.resolve('url'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

Now edit your package.json for making react-app-rewired to work.

//package.json
...
 "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "assert": "^2.0.0",
    "buffer": "^6.0.3",
    "crypto": "npm:crypto-browserify",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "react": "^17.0.2",
    "react-app-rewired": "^2.1.9",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "rewire": "^6.0.0",
    "stream": "npm:stream-browserify",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.0",
    "web-vitals": "^2.1.2",
    "web3": "^1.6.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

Hope this helps.

Thanks.

[Shintarot]

I was also having trouble with the same error when using .env (it was fine in past versions), but I removed the following code and it worked. (Sorry if this has nothing to do with the discussion!)

import dotenv from 'dotenv';
dotenv.config();

[lnvestor]

Hi Guys i'm using latest version

React => v17 React scripts=> v5 webpack => v5

To Fix The Problem

1) Install 👇

`

• "fs": "^2.0.0",  // npm i fs
  

• "assert": "^2.0.0",  // npm i assert
  

• "https-browserify": "^1.0.0", // npm i https-browserify
  

• "os": "^0.1.2",// npm i os
  

• "os-browserify": "^0.3.0", // npm i os-browserify
  

• "react-app-rewired": "^2.1.9", //npm i react-app-rewired
  

• "stream-browserify": "^3.0.0", // stream-browserify
  

• "stream-http": "^3.2.0",//stream-http
  

`

2) Creating config-overrides.js

Create config-coverrides.js in Root dir like this 👇

3) Add configs to config-overrides.js

const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        fs: require.resolve('fs'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

I.e 👇

3) Change packages.js

Hope this Help

[smelamud]

I am using craco for CRA config overrides. Does anybody know how to configure it to fix this issue?

[david86702]

great. It's working for me.

[WalkerWang731]

I somehow fixed it too using react-app-rewired Make sure you install this package and create new file config-overrides.js in your root directory

/* config-overrides.js */
const webpack = require('webpack');
module.exports = function override(config, env) {
    //do stuff with the webpack config...

    config.resolve.fallback = {
        url: require.resolve('url'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

Now edit your package.json for making react-app-rewired to work.

//package.json
...
 "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "assert": "^2.0.0",
    "buffer": "^6.0.3",
    "crypto": "npm:crypto-browserify",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "react": "^17.0.2",
    "react-app-rewired": "^2.1.9",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "rewire": "^6.0.0",
    "stream": "npm:stream-browserify",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.0",
    "web-vitals": "^2.1.2",
    "web3": "^1.6.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

Hope this helps.

Thanks.

looks, good! Thank you!

[lnvestor]

I am using craco for CRA config overrides. Does anybody know how to configure it to fix this issue?

Hi there if you are using craco because of tailwind i suggest you to install tailwind v3 craco not required anymore in last version of tailwind

[michaelmarziani]

I am using craco for CRA config overrides. Does anybody know how to configure it to fix this issue?

Dear @smelamud,

I posted a start to finish example using CRA and craco overrides. It's specific to the project @react-pdf/renderer, but I think it will give you a sense of how to do overrides using craco. https://stackoverflow.com/a/70441023/2193573

Good luck!

[n8sabes]

I too am using craco, but not tailwind and need a solution. I have temporarily removed packages that will not build and therefore lost functionality.

There are likely a lot of libraries in the ecosystem that will fail to build due to this issue. This may result in the loss of some great works because their authors either do not have the time or knowhow to fix this.

Here is one example of a great package, lost to this issue: Clean-CSS

[obrad97]

I followed all the steps above and i am still getting "Uncaught ReferenceError: Buffer is not defined" error... I have tried everything, i don't know what else to do

[ysageev]

Just to pile on -- I cannot proceed with upgrading to 5.0 until this gets fixed. I'm not going to install react-app-rewired/eject and hack around the absence of expected behavior. Can we get a hard answer on whether this fix will be included in 5.0.1?

[baeteja]

Also not using 5.0 if this does not get addressed.

[DanishSiraj]

Same issue here, got resolved by adding fallbacks to node_modules/react-scripts/config/webpack.config.js and installing the said packages, this seems a temporary solution though for CI/CD deployments to netlify/vercel this won't hold and build will break :thinking:

[PrimaryOmega]

I am using JWT-Simple, I have to add

//webpack.config.js
    resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve("stream-browserify"),
        buffer: require.resolve("buffer/")
      },
    }

But it did not work at all, there is still no solution?🤔🤔

[michaelmarziani]

@PrimaryOmega I think you need something like in the webpack.configure.plugins section of my craco.config.js, as well as the webpack definition at the top:

const webpack = require("webpack");

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
};

I got this webpack config from the package maintainer, and then adapted it for use in craco. I also had to install the additional packages, in this case process browserify-zlib stream-browserify util buffer assert.

[PrimaryOmega]

@michaelmarziani

I am using Tailwind CSS v3, I put it in the postcss.config.js

const webpack = require("webpack");

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
}

And the dependencies you mentioned in the webpack.config.js

resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve("stream-browserify"),
        process: require.resolve("process/browser"),
        zlib: require.resolve("browserify-zlib"),
        util: require.resolve("util"),
        buffer: require.resolve("buffer"),
        asset: require.resolve("assert"),
      },
}

and it didn't work 🤧🤧

[Oni-giri]

Does someone know how to install the previous version of CRA? npx [email protected] my-app fails:

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

[DanishSiraj]

npx [email protected] failing for me as well, did clone an existing 4.0.3 project for now 😓

[lnvestor]

@michaelmarziani

I am using Tailwind CSS v3, I put it in the postcss.config.js

const webpack = require("webpack");

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
}

And the dependencies you mentioned in the webpack.config.js

resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve("stream-browserify"),
        process: require.resolve("process/browser"),
        zlib: require.resolve("browserify-zlib"),
        util: require.resolve("util"),
        buffer: require.resolve("buffer"),
        asset: require.resolve("assert"),
      },
}

and it didn't work 🤧🤧

Bro try this am using tailwind v3 postcss 8 and it's works for me https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736

[michaelmarziani]

@PrimaryOmega My configuration is specific to using craco to override CRA and inject additional webpack configs.

[PrimaryOmega]

@michaelmarziani I am using Tailwind CSS v3, I put it in the postcss.config.js

const webpack = require("webpack");

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
}

And the dependencies you mentioned in the webpack.config.js

resolve: {
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve("stream-browserify"),
        process: require.resolve("process/browser"),
        zlib: require.resolve("browserify-zlib"),
        util: require.resolve("util"),
        buffer: require.resolve("buffer"),
        asset: require.resolve("assert"),
      },
}

and it didn't work 🤧🤧

Bro try this am using tailwind v3 postcss 8 and it's works for me #11756 (comment) It worked, but it does not show the errors as before by the system console or in the browser, only in the developer console. 😪😪It is programmable, but now I have to visit the developer console more often hahaha. 🤣🤣

[yulolimum]

For those that don't want to use craco or react-app-rewired. You can use patch-package.

1. Install patch-package: yarn add patch-package.

2. Install the needed pollyfills and modify node_modules/react-scripts/config/webpack.config.js. Here's an example. This is taken from Webpack's docs. Don't add all of them, only the ones you need. Side note, for those wondering which ones need to be pollyfilled, do an initial build of your application and it will tell you. Another side note, make sure you install the packages first before modifying the webpack config.

3. Run yarn patch-package react-scripts. This will generate a patch (this should be committed in your repo going forward).

4. Add a postinstall script to package.json: "postinstall": "yarn patch-package",. Now, anytime, someone installs npm deps on this project, will get the patch you created in step 3 applied automatically.

5. Enjoy zero compile errors.

[ilijapet]

I have same issue when I try to use web3.js (1.6.1)

Compiled with problems:X

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/cipher-base'

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: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can't resolve 'crypto' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/eth-lib/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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can't resolve 'assert' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/ethereumjs-util/dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/ethereumjs-util/dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can't resolve 'assert' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/ethereumjs-util/dist.browser'

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: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }

ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can't resolve 'crypto' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/web3-eth-accounts/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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/web3-eth-accounts/node_modules/eth-lib/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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }

ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26

Module not found: Error: Can't resolve 'http' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/web3-providers-http/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: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28

Module not found: Error: Can't resolve 'https' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/web3-providers-http/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: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/web3-providers-ws/lib/helpers.js 11:12-26

Module not found: Error: Can't resolve 'url' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/web3-providers-ws/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: { "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 }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/xhr2-cookies/dist'

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: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/xhr2-cookies/dist'

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: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can't resolve 'os' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/xhr2-cookies/dist'

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 }

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 43:10-24

Module not found: Error: Can't resolve 'url' in '/home/ilijapet/proba/smartCOOP2.0/smartcoop_react/node_modules/xhr2-cookies/dist'

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 }

[ilijapet]

Works for me! Solution down below...

Hi Guys i'm using latest version

React => v17 React scripts=> v5 webpack => v5

To Fix The Problem

1) Install 👇

`

• "fs": "^2.0.0",  // npm i fs
  

• "assert": "^2.0.0",  // npm i assert
  

• "https-browserify": "^1.0.0", // npm i https-browserify
  

• "os": "^0.1.2",// npm i os
  

• "os-browserify": "^0.3.0", // npm i os-browserify
  

• "react-app-rewired": "^2.1.9", //npm i react-app-rewired
  

• "stream-browserify": "^3.0.0", // stream-browserify
  

• "stream-http": "^3.2.0",//stream-http
  

`

2) Creating config-overrides.js

Create config-coverrides.js in Root dir like this 👇

3) Add configs to config-overrides.js

const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        fs: require.resolve('fs'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

I.e 👇

3) Change packages.js

Hope this Help

[BushraHussain]

Hi Guys i'm using latest version

React => v17 React scripts=> v5 webpack => v5

To Fix The Problem

1) Install

`

• "fs": "^2.0.0",  // npm i fs
  

• "assert": "^2.0.0",  // npm i assert
  

• "https-browserify": "^1.0.0", // npm i https-browserify
  

• "os": "^0.1.2",// npm i os
  

• "os-browserify": "^0.3.0", // npm i os-browserify
  

• "react-app-rewired": "^2.1.9", //npm i react-app-rewired
  

• "stream-browserify": "^3.0.0", // stream-browserify
  

• "stream-http": "^3.2.0",//stream-http
  

`

2) Creating config-overrides.js

Create config-coverrides.js in Root dir like this point_down

3) Add configs to config-overrides.js

const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        fs: require.resolve('fs'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

I.e point_down

3) Change packages.js

Hope this Help

Issue resolved . Thanks a lot @investor!

[lnvestor]

It's okay bro ❤️

[PiotrZak]

The same issue, it's seen that 2 options are possible:

A) - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify'

B) - resolve.fallback: { "path": false }

But after configuring webpack - there is a lot of dependencies to install etc.

[primelos]

npm i fs is not working @ilijapet & @BushraHussain looks like npm blocked it? now what?

[matbeedotcom]

I'm not going to use some react-app-rewired but I need "crypto" module to work. What's proven to work?

[cnotethegr8]

I'm not going to use some react-app-rewired but I need "crypto" module to work. What's proven to work?

It's not a solution for CRA, but I switched to next.js and this is not a problem.

[codeaid]

Another victim here. In my case colors requires os and winston logger requires os, fs, path, zlib, http and https which means the project obviously doesn't even compile.

Having scrolled through this issue I don't see any obvious solutions. Are there none apart from reverting back to v4 or have I missed anything (not going to install Rewire just to fix something that worked fine before really).

[matbeedotcom]

I got it working by ejecting and adding the resolve fallbacks to the config/webpack.config.js

[codeaid]

@acidhax Ejecting is not an option!

[Robloche]

Ejecting is worse than adding Rewire...

[ysageev]

Create React App User Guide:

Step 1: npx create-react-app my-app Step 2: npm eject

[Magofoco]

Same issue here with ethers js.

Module not found: Error: Can't resolve 'fs' in "node-env/file/path" Module not found: Error: Can't resolve 'path' in "node-env/file/path" Module not found: Error: Can't resolve 'os' in "node-env/file/path

Forced to use old version of react scripts, which in turn forces me to use an old version of tailwind :(

It's the same for me.

The latest version of TailwindCSS is v3. Its guide is here: https://tailwindcss.com/docs/guides/create-react-app However, it uses react-scripts 5.0.0. This breaks web3.js with polyfill. So we have to downgrade out TailwindCSS version

I followed this guide in order to downgrade to TailwindCSS v2 (I was on V3): https://v2.tailwindcss.com/docs/guides/create-react-app and then I changed react_scripts in package.json form 5.0.0 to 4.0.3

[obirikan]

it still does not work out for me

[Magofoco]

it still does not work out for me

If you want open a Stakoverflow question, link it here and I try to answer on Stackoverflow in more details

[acomito]

Having this issue with zlib, stream, and util. Mostly for @react-pdf

I've used react-app-rewired many years ago (didnt give me any issues).

Is the consensus at this point:

1. Use react-app-rewired , or
2. eject

?

[ysageev]

3. Stay on current version and wait for them to fix the problem.

[johnthagen]

We tried to port all of our direct usages of Node over to npm packages.

We were actually successful in moving our direct usages of "crypto" to sha.js and Buffer to js-base64, but then we hit a wall when we we realized we had dozens of dependencies that depend on safe-buffer (46 references in package.json), which itself internally uses Buffer.

[fernandocamargo]

Have any of you tried this approach before deciding to eject or rewire? I have the impression that it would work for many of the cases presented.

[bdbvb]

The way I worked around this was to install the following npm libraries

"react-app-rewired": "^2.1.11" (in package.json devDependencies)

"node-polyfill-webpack-plugin": "^1.1.4" (in package.json dependencies)

update the npm scripts to use react-app-rewired instead of react-scripts, for example

"scripts": {
    "build": "react-app-rewired build",
    "start": "set WDS_SOCKET_PORT=0 && react-app-rewired start"
}

include a config-overrides.js file next to package.json, for example

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = function override(config, env) {
    config.plugins.push(new NodePolyfillPlugin({
        excludeAliases: [
            "assert",
            "console",
            "constants",
            "crypto",
            "domain",
            "events",
            "http",
            "https",
            "os",
            "path",
            "punycode",
            "querystring",
            "_stream_duplex",
            "_stream_passthrough",
            "_stream_transform",
            "_stream_writable",
            "string_decoder",
            "sys",
            "timers",
            "tty",
            "url",
            "util",
            "vm",
            "zlib"
        ]
    }));
    return config;
};

I excluded a bunch of aliases (one or more may have been giving me a problem), but I guess you could try it first without exclusions and then exclude stuff as necessary, or exclude everything and then start deleting exclusions, however you want to approach it. See the "node-polyfill-webpack-plugin" documentation for details.

I also had problems with it not working at all and had to blast my node_modules and other distributables and reinstall, rebuild for it to then magically work.

Anyway, that was my experience and my app seems to be working now.

(I had started with trying to import various individual npm packages for individual fallbacks, as some people have mentioned on this thread, but I didn't have any luck going that route, (the fs package on npm seems bogus btw), and the node-polyfill-webpack-plugin seems a lot cleaner.)

I'm looking forward to a fix for this in the next verision for CRA so I can get rid of the above crud.

[michaelmarziani]

Having this issue with zlib, stream, and util. Mostly for @react-pdf

I've used react-app-rewired many years ago (didnt give me any issues).

Is the consensus at this point:

1. Use react-app-rewired , or
2. eject

?

@acomito, I was able to make this work without too much fuss, specifically for @react-pdf/renderer using craco which I think seems better maintained than rewired.

Here's the step by step instructions I wrote for a new @react-pdf/renderer project on stackoverflow. Good luck!

[payam49er]

Having this issue with web3 and web3-react.

[velikayikci]

I have the some problem, +buffer and stream modules not found. (these are core node packages)

[DayakarMalgari]

I'm facing the same issue.. ERROR in ./node_modules/convert-source-map/node_modules/safe-buffer/index.js 2:13-30 Module not found: Error: Can't resolve 'buffer' in \node_modules\convert-source-map\node_modules\safe-buffer' @ ./node_modules/convert-source-map/index.js 4:17-39 @ ./node_modules/@babel/core/lib/transformation/normalize-file.js 49:15-44 @ ./node_modules/@babel/core/lib/transformation/index.js 24:21-48 @ ./node_modules/@babel/core/lib/transform.js 20:22-49 @ ./node_modules/@babel/core/lib/index.js 242:17-39

any help?

[ryanbennettvoid]

Same issue when I import the taquito library.

I attempted to downgrade create-react-app back to 4.0.3, but it fails with the error We no longer support global installation of Create React App any time I run it.

Is there a way I can bypass this error when using the old version of CRA? It's frustrating to be forced to deal with the polyfill issues.

[brunofilho1]

I just downgraded react-scripts to v4.0.3 and it solved my problem with dotenv, but in a tiny project.

[rodsotdia]

Downgrading to v4.0.3 fixed the issue for me as well using @walletconnect/web3-provider

[rgb2hsl]

I temporarily dealt with this by adding aliases to my dependencies. How bad is this solution?

Example:

"buffer": "^6.0.3",
"crypto": "npm:crypto-browserify",
"stream": "npm:stream-browserify",

Thanks a lot! It really helps to deal with v5 without eject.

[MrEmanuel]

I too have issues with this after upgrading. I'd be happy to not include any polyfills and follow the instructions in the error message, if I just knew how.. ?

If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }

My assumption is that I don't need polyfills if I only target newer browsers. Is there any way to fix this without ejecting or using rewire or even polyfills?

I'm receiving an error for the packages stream zlib and util.

[bdbvb]

I too have issues with this after upgrading. I'd be happy to not include any polyfills and follow the instructions in the error message, if I just knew how.. ?

If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }

My assumption is that I don't need polyfills if I only target newer browsers. Is there any way to fix this without ejecting or using rewire or even polyfills?

I'm receiving an error for the packages stream zlib and util.

It's not so much an issue of running in newer browsers, it's more so because one of your dependencies (or a dependency's dependency, etc.) leverages a node.js (server-side) API in some form or fashion.

I think your best bet is craco or react-app-rewired.

[JoshuaPerk]

The way I worked around this was to install the following npm libraries

"react-app-rewired": "^2.1.11" (in package.json devDependencies)

"node-polyfill-webpack-plugin": "^1.1.4" (in package.json dependencies)

update the npm scripts to use react-app-rewired instead of react-scripts, for example

"scripts": {
    "build": "react-app-rewired build",
    "start": "set WDS_SOCKET_PORT=0 && react-app-rewired start"
}

include a config-overrides.js file next to package.json, for example

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = function override(config, env) {
    config.plugins.push(new NodePolyfillPlugin({
        excludeAliases: [
            "assert",
            "console",
            "constants",
            "crypto",
            "domain",
            "events",
            "http",
            "https",
            "os",
            "path",
            "punycode",
            "querystring",
            "_stream_duplex",
            "_stream_passthrough",
            "_stream_transform",
            "_stream_writable",
            "string_decoder",
            "sys",
            "timers",
            "tty",
            "url",
            "util",
            "vm",
            "zlib"
        ]
    }));
    return config;
};

I excluded a bunch of aliases (one or more may have been giving me a problem), but I guess you could try it first without exclusions and then exclude stuff as necessary, or exclude everything and then start deleting exclusions, however you want to approach it. See the "node-polyfill-webpack-plugin" documentation for details.

I also had problems with it not working at all and had to blast my node_modules and other distributables and reinstall, rebuild for it to then magically work.

Anyway, that was my experience and my app seems to be working now.

(I had started with trying to import various individual npm packages for individual fallbacks, as some people have mentioned on this thread, but I didn't have any luck going that route, (the fs package on npm seems bogus btw), and the node-polyfill-webpack-plugin seems a lot cleaner.)

I'm looking forward to a fix for this in the next verision for CRA so I can get rid of the above crud.

This worked for me. Thank you!