adding browser support polyfill

[luu-alex]

#5053 #5031 #4659 #4767 Tested using create-react-app and angular 12 worked on my end, id reccommend testing it as well

Description

Please include a summary of the changes and be sure to follow our Contribution Guidelines.

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• [ ] I have selected the correct base branch.
• [ ] I have performed a self-review of my own code.
• [ ] I have commented my code, particularly in hard-to-understand areas.
• [ ] I have made corresponding changes to the documentation.
• [ ] My changes generate no new warnings.
• [ ] Any dependent changes have been merged and published in downstream modules.
• [ ] I ran npm run dtslint with success and extended the tests and types if necessary.
• [ ] I ran npm run test:cov and my test cases cover all the lines and branches of the added code.
• [ ] I ran npm run build with success.
• [ ] I have tested the built dist/web3.min.js in a browser.
• [ ] I have tested my code on the live network.
• [ ] I have checked the Deploy Preview and it looks correct.
• [ ] I have updated the CHANGELOG.md file in the root folder.

[render[bot]]

Your Render PR Server URL is https://web3-js-pr-5274.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-cbcrehcgqg45pi6tqeg0.

[coveralls]

Pull Request Test Coverage Report for Build 2891572287

• 0 of 0 changed or added relevant lines in 0 files are covered.
• 436 unchanged lines in 7 files lost coverage.
• Overall coverage decreased (-2.3%) to 72.255%

---

Files with Coverage Reduction	New Missed Lines	%
packages/web3-core-requestmanager/src/jsonrpc.js	1	88.0%
packages/web3-core-helpers/src/formatters.js	25	80.95%
packages/web3-core-helpers/src/errors.js	31	4.41%
packages/web3-utils/src/soliditySha3.js	55	5.13%
packages/web3-utils/src/index.js	62	29.31%
packages/web3-utils/src/utils.js	96	13.31%
packages/web3-eth-accounts/src/index.js	166	23.62%
<!--	Total:	436

Totals
Change from base Build 2884572200:	-2.3%
Covered Lines:	3402
Relevant Lines:	4432

---

💛 - Coveralls

[luu-alex]

@jdevcs the file web3.min.js contains the polyfills needed for bundlers like webpack. webpack was using our main file first, lib/index.js and would get errors during runtime, the dist content fixes this.

[luu-alex]

@jdevcs got it, removing dist files from PR

[luu-alex]

@avkos I ran npm run build and it updated package.lock. will remove

[smejak]

Hello, I am using web3.js in my jupyter lab extension, but am running into issues during installation. I think my error is related to this update, however, when I added the changes proposed here manually, it didn't solve my issue. While building my extension, I am getting this error:

ModuleNotFoundError: Module not found: Error: Can't resolve 'http' in '/Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/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 }                                                                                                                                                                           
    at /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/webpack/lib/Compilation.js:2016:28                                                                                             
    at /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/webpack/lib/NormalModuleFactory.js:798:13                                                                                      
    at eval (eval at create (/Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)                                                 
    at /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/webpack/lib/NormalModuleFactory.js:270:22                                                                                      
    at eval (eval at create (/Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)                                                  
    at /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/webpack/lib/NormalModuleFactory.js:434:22                                                                                      
    at /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/webpack/lib/NormalModuleFactory.js:116:11                                                                                      
    at /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/webpack/lib/NormalModuleFactory.js:670:25  
at /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/webpack/lib/NormalModuleFactory.js:855:8
    at /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/webpack/lib/NormalModuleFactory.js:975:5
resolve 'http' in '/Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/web3-providers-http/lib'
  Parsed request is a module
  using description file: /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/web3-providers-http/package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/web3-providers-http/lib/node_modules doesn't exist or is not a directory
      /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/web3-providers-http/node_modules doesn't exist or is not a directory
      /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules
        single file module
          using description file: /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/package.json (relative path: ./node_modules/http)
            no extension
              /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/http doesn't exist
            .js
              /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/http.js doesn't exist.json
              /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/http.json doesn't exist
            .wasm
              /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/http.wasm doesn't exist
        /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/http doesn't exist
      /Users/jakub/Development/Algovera/Core/tests/node_modules doesn't exist or is not a directory
      /Users/jakub/Development/Algovera/Core/node_modules doesn't exist or is not a directory
      /Users/jakub/Development/Algovera/node_modules doesn't exist or is not a directory
      /Users/jakub/Development/node_modules doesn't exist or is not a directory
      /Users/jakub/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
/Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/@jupyterlab/builder/lib/build-labextension.js:100
            throw new Error(err.details);
            ^

Error: resolve 'http' in '/Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/web3-providers-http/lib'
  Parsed request is a module
  using description file: /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/web3-providers-http/package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/web3-providers-http/lib/node_modules doesn't exist or is not a directory
      /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/web3-providers-http/node_modules doesn't exist or is not a directory
      /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/jakub/Development/Algovera/Core/tests/jupyterlab_extensions/node_modules
...

Web3js is actually used here in another node package (ocean-lib) and I have tried adding that update to this library as well. Also, I have tried using web3.js previously to just send transactions and that also resulted in the same error, but for instance ethers.js did not (but now I cannot refactor my code to ethers.js since it is nested in another package).

I appreciate any suggestions.

[luu-alex]

@smejak You added changes to your package/web3/package.json? This looks a bit weird Field 'browser' doesn't contain a valid alias configuration can you join the discord and post in the web3js-general channel? https://discord.com/invite/pb3U4zE8ca ill help debug with you from there

[smejak]

Hi @luu-alex . Thanks, I just sent a message there.

[limitedAtonement]

Thank you for all your work getting this tested and merged! How do I get this version of web3? I'm currently using web3 version "^1.7.5" from npm and I think it does not have this fix. I see that npm has a 1.8.0; does it have this fix?

[luu-alex]

@limitedAtonement yep, upgrade to 1.8

[Jack-Works]

this PR break throws a runtime error: removing the browser field added by this PR solves the problem.

TypeError: Cannot set property Request of #<Object> which has only a getter

[jdevcs]

this PR break throws a runtime error: removing the browser field added by this PR solves the problem.

TypeError: Cannot set property Request of # which has only a getter

@luu-alex