adding webpack 5

CHANGELOG.md

@@ -614,8 +614,23 @@ Released with 1.0.0-beta.37 code base.
 
 ## [Unreleased]
 
+### Changed
+
+- Updated Webpack 4 to Webpack 5, more details at (#5629)
+- `crypto-browserify` module is now used only in webpack builds for polyfilling browsers (#5629)
+- Updated `ethereumjs-util` to `7.1.5` (#5629)
+
 ### Fixed
 
 -  Fixed types for `web3.utils._jsonInterfaceMethodToString` (#5550)
 -  Fixed Next.js builds failing on Node.js v16, Abortcontroller added if it doesn't exist globally (#5601)
--  Builds fixed by updating all typescript versions to 4.1 (#5675) 
+-  Builds fixed by updating all typescript versions to 4.1 (#5675) 
+
+### Removed
+
+- `clean-webpack-plugin` has been removed from dev-dependencies (#5629)
+
+### Added
+
+- `https-browserify`, `process`, `stream-browserify`, `stream-http`, `crypto-browserify` added to dev-dependencies for polyfilling (#5629)
+- Add `readable-stream` to dev-dependancies for webpack (#5629) 

README.md

@@ -110,7 +110,9 @@ If you are using the types in a `commonjs` module, like in a Node app, you just
 
 ### Web3 and Create-react-app
 
-If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.
+**1.8 UPDATE: If you are facing any issues with create-react-app or angular, make sure you are using a web3 version of 1.8.0 or greater, as its been fixed** 
+
+If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app. 
 
 ### Solution
 

package.json

@@ -110,15 +110,16 @@
         "bundlesize": "^0.18.0",
         "chai": "^4.2.0",
         "chai-as-promised": "^7.1.1",
-        "clean-webpack-plugin": "^3.0.0",
         "core-js": "^3.6.5",
+        "crypto-browserify": "^3.12.0",
         "crypto-js": "^3.3.0",
         "decache": "^4.6.0",
         "dependency-check": "^4.1.0",
-        "ethereumjs-util": "^7.1.0",
+        "ethereumjs-util": "^7.1.5",
         "ethers": "^5.4.4",
         "fetch-mock": "^9.11.0",
         "ganache-cli": "^6.12.0",
+        "https-browserify": "^1.0.0",
         "jshint": "^2.12.0",
         "karma": "^6.3.19",
         "karma-browserify": "^7.0.0",
@@ -130,12 +131,16 @@
         "mocha": "^6.2.3",
         "nyc": "^14.1.1",
         "pify": "^4.0.1",
+        "process": "^0.11.10",
+        "readable-stream": "^3.6.0",
         "rimraf": "^3.0.2",
         "sandboxed-module": "^2.0.4",
+        "stream-browserify": "^3.0.0",
+        "stream-http": "^3.2.0",
         "ts-node": "^9.0.0",
         "typescript": "4.1",
         "wait-port": "^0.2.9",
-        "webpack": "^4.44.2",
-        "webpack-cli": "^4.9.1"
+        "webpack": "^5.75.0",
+        "webpack-cli": "^5.0.0"
     }
 }

packages/web3-eth-accounts/package.json

@@ -16,9 +16,8 @@
     "dependencies": {
         "@ethereumjs/common": "2.5.0",
         "@ethereumjs/tx": "3.3.2",
-        "crypto-browserify": "3.12.0",
         "eth-lib": "0.2.8",
-        "ethereumjs-util": "^7.0.10",
+        "ethereumjs-util": "^7.1.5",
         "scrypt-js": "^3.0.1",
         "uuid": "^9.0.0",
         "web3-core": "1.8.1",

packages/web3-eth-accounts/src/index.js

@@ -25,7 +25,7 @@
 var core = require('web3-core');
 var Method = require('web3-core-method');
 var Account = require('eth-lib/lib/account');
-var cryp = (typeof global === 'undefined') ? require('crypto-browserify') : require('crypto');
+var cryp = require('crypto');
 var scrypt = require('scrypt-js');
 var uuid = require('uuid');
 var utils = require('web3-utils');

webpack.config.js

@@ -1,18 +1,11 @@
 const path = require("path");
 const webpack = require("webpack");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-// https://github.com/webpack/webpack/issues/13572#issuecomment-923736472
-const crypto = require("crypto");
-const crypto_createHash_alg = crypto.createHash;
-crypto.createHash = (algorithm, options ) => crypto_createHash_alg(algorithm == "md4" ? "sha256" : algorithm, options);
-
 module.exports = {
     mode: "production",
     entry: {
         web3: "./packages/web3/lib/index.js",
     },
     plugins: [
-        new CleanWebpackPlugin(),
         new webpack.SourceMapDevToolPlugin({
             filename: "[file].map",
         }),
@@ -22,14 +15,30 @@ module.exports = {
                 return /(.*\/genesisStates\/.*\.json)/.test(resource)
             },
         }),
-    ],
+        new webpack.ProvidePlugin({
+			process: 'process/browser',
+            Buffer: ['buffer', 'Buffer']
+		}),
+	],
     resolve: {
         alias: {
             // To avoid blotting up the `bn.js` library all over the packages 
             // use single library instance. 
-            "bn.js": path.resolve(__dirname, 'node_modules/bn.js')
-        }
+            "bn.js": path.resolve(__dirname, 'node_modules/bn.js'),
+            'ethereumjs-util': path.resolve(__dirname, 'node_modules/ethereumjs-util'),
+            "buffer": path.resolve(__dirname, 'node_modules/buffer'),
+
+
+        },
+        fallback: {
+            https: require.resolve('https-browserify'),
+            http: require.resolve("stream-http"),
+            crypto: require.resolve("crypto-browserify"),
+            stream: require.resolve("stream-browserify")
+        },
+
     },
+
     module: {
         rules: [
             {
@@ -63,5 +72,6 @@ module.exports = {
         path: path.resolve(__dirname, "dist"),
         library: "Web3",
         libraryTarget: "umd",
+        clean: true,
     },
 };