Multiple issues with webpack, polyfill and node modules

Question

I am trying to build a simple react app calling a smart contract, however while running - I get multiple issues with webpack, node modules. Most of the issues are pointing to resolve error This react app was created with the create-react-app module. Here are the errors

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

Module not found: Error: Can't resolve 'stream' in 'C:\Sandip@IBM\BlockChainDev\MultiSigWallet\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.

Similarly the other errors

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

Module not found: Error: Can't resolve 'crypto' in 
ERROR in ../node_modules/swarm-js/node_modules/eth-lib/lib/bytes.js 9:193-227
ERROR in ../node_modules/web3-eth-accounts/lib/index.js 33:74-91

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

Module not found: Error: Can't resolve 'http' in

I am bit lost on how to resolve these dependecy errors.

Thanks

check the answer here https://stackoverflow.com/questions/70472965/web3-issue-react-application-not-compiling/70512623#70512623 — Yilmaz, Feb 08 '22 at 19:06

score 2 · Answer 1 · answered Feb 08 '22 at 12:28

2

If my guess is correct, you are using react-script 5.0 + please use "react-scripts": "4.0.3", that issue is because of webpack config. there are several way to fix that problem but I think this way is simple solution.

answered Feb 08 '22 at 12:28

Keigo Igarashi

113
1
1
13

where do I need to change the version? How do I downgrade the version of react? – BlockChain Learner Feb 08 '22 at 12:32
just edit package.json and npm install. this will automatically downgrade react-script version – Keigo Igarashi Feb 08 '22 at 12:33
thanks...I modifed the version and ran npm install within the client folder...now the npm server won't start, getting some other errros like -- There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally. The react-scripts package provided by Create React App requires a dependency: "webpack": "4.44.2" – BlockChain Learner Feb 08 '22 at 12:45
what is your react version? – Keigo Igarashi Feb 08 '22 at 12:49
"_id": "react@17.0.2", – BlockChain Learner Feb 08 '22 at 13:03
what node modules are you using in package.json? – Keigo Igarashi Feb 08 '22 at 13:17
This is what I have in the package.json --> "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": "^4.0.3", "web-vitals": "^2.1.4", "web3": "^1.7.0" }, – BlockChain Learner Feb 08 '22 at 13:35
I think I know what is the issue. There is another version of webpack higher up the tree, (part of node_modules for the truffle project) ..but I do not know how to fix it – BlockChain Learner Feb 08 '22 at 13:42
I can't see webpack on your package.json. – Keigo Igarashi Feb 08 '22 at 15:43
@BlockChainLearner did this issue ever get solved? – devdude19289 Jun 16 '22 at 12:54

Multiple issues with webpack, polyfill and node modules

1 Answers1