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]

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%

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

---

💛 - Coveralls

[jdevcs]

Usually dist contents are added for tagged releases, why we need these builds in this PR?

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

[jdevcs]

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

These files are generated with release process so in any release these will be over written, if we include in this PR.

And if we dnt include these build files , these will be generated any ways with "browser": "dist/web3.min.js", fix.

[luu-alex]

@jdevcs got it, removing dist files from PR

[avkos]

As I see, you didn't add/delete any package in package.json. Why is it a lot of changes in package-lock.json?

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

[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 # 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