Webpack5 support for create-react-app

[mconnelly8]

When a user uses the create-react-app to make their React project, it comes pre bundled with webpack 5. The scope will be to ensure that web3.js can be successfully bundled using webpack 5 and within a React project made with the create-react-app.

[limitedAtonement]

I think I'm hitting this issue right now. Is there a known workaround? I used create-react-app then added web3 to package.json, and I don't understand the resulting errors:

Module not found: Error: Can't resolve 'stream' in '/app/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 }

"If you want to include a polyfill..." but I don't want to do that...I assume some library that I'm using (web3?) is doing this? There are also

Module not found: Error: Can't resolve 'crypto' in '/app/node_modules/eth-lib/lib'
...
Module not found: Error: Can't resolve 'assert' in '/app/node_modules/ethereumjs-util/dist.browser'
...
Module not found: Error: Can't resolve 'crypto' in '/app/node_modules/web3-eth-accounts/lib'
...
Module not found: Error: Can't resolve 'crypto' in '/app/node_modules/web3-eth-accounts/node_modules/eth-lib/lib'
...
Module not found: Error: Can't resolve 'http' in '/app/node_modules/web3-providers-http/lib'
...
Module not found: Error: Can't resolve 'https' in '/app/node_modules/web3-providers-http/lib'
...
Module not found: Error: Can't resolve 'url' in '/app/node_modules/web3-providers-ws/lib'

Based on the title of this ticket, is the solution to move to webpack 4?

[luu-alex]

@limitedAtonement Hey we have a PR that will fix this issue #5274 , it'll be merged in a few weeks for next version so in the meantime to fix it: go to your node_modules/web3/package.json and add "browser": "dist/web3.min.js", like this

    ...
    "main": "lib/index.js",
    "browser": "dist/web3.min.js",
    "bugs": { ...

example

[limitedAtonement]

Thank you for the help! I removed web3 from dependencies and added the browser line you mentioned and I think matching the example to which you linked. The compilation errors are gone, but now I get, "Module not found: Error: Can't resolve 'web3' in '/app/src'" with regards to import Web3 from 'web3';. I get the feeling that you knew this would happen and you thought me capable of handling the situation, but you may have overestimated my npm prowess!

[luu-alex]

Hi there! dont remove web3 from your dependencies. and if you added the browser line in your node_modules/web3/package.json it should work. if you run into anymore issues please join the discord and post in the web3js-general channel and i can help out. https://discord.gg/gzdbXCcV @limitedAtonement

[limitedAtonement]

(from discord conversation) I was adjusting my project's package.jsqn, but should have been adjusting the web3 package.json. I used this

awk '/"main":/ { print; print "\"browser\": \"dist/web3.min.js\",";}1' /app/node_modules/web3/package.json > /app/new-package.json && mv /app/new-package.json /app/node_modules/web3/package.json;

and it appears to have the desired effect. Thank you!