Merge pull request #3489 from poanetwork/vb-update-npm-deps

Migrate to Webpack@5

CHANGELOG.md

@@ -18,6 +18,7 @@
 - [#3457](https://github.com/poanetwork/blockscout/pull/3457) - Fix doubled token transfer on block's page if block has reorg
 
 ### Chore
+- [#3489](https://github.com/poanetwork/blockscout/pull/3489) - Migrate to Webpack@5
 - [#3487](https://github.com/poanetwork/blockscout/pull/3487) - Docker setup update to be compatible with Erlang OTP 23
 - [#3484](https://github.com/poanetwork/blockscout/pull/3484) - Elixir upgrade to 11.2
 - [#3483](https://github.com/poanetwork/blockscout/pull/3483) - Update outdated dependencies

apps/block_scout_web/assets/css/theme/_variables-non-critical.scss

@@ -1,4 +1,4 @@
-@import "theme/base_variables";
+@import "base_variables";
 @import "neutral_variables-non-critical";
 // @import "xusdt_variables-non-critical";
 // @import "dai_variables-non-critical";

apps/block_scout_web/assets/css/theme/_variables.scss

@@ -1,4 +1,4 @@
-@import "theme/base_variables";
+@import "base_variables";
 @import "neutral_variables";
 // @import "xusdt_variables";
 // @import "dai_variables";

apps/block_scout_web/assets/package.json

@@ -20,28 +20,37 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.1.0-4",
+    "assert": "^2.0.0",
     "awesomplete": "^1.1.5",
     "bignumber.js": "^9.0.0",
     "bootstrap": "^4.3.1",
     "chart.js": "^2.9.3",
     "clipboard": "^2.0.4",
+    "core-js": "^2.6.12",
+    "crypto-browserify": "^3.12.0",
     "eth-net-props": "^1.0.33",
     "highlight.js": "^9.16.2",
     "highlightjs-solidity": "^1.0.8",
+    "https-browserify": "^1.0.0",
     "humps": "^2.0.1",
     "jquery": "^3.4.0",
     "lodash": "^4.17.19",
     "moment": "^2.24.0",
     "nanomorph": "^5.4.0",
     "numeral": "^2.0.6",
+    "os-browserify": "^0.3.0",
     "path-parser": "^4.2.0",
     "phoenix": "file:../../../deps/phoenix",
     "phoenix_html": "file:../../../deps/phoenix_html",
     "popper.js": "^1.14.7",
     "reduce-reducers": "^0.4.3",
     "redux": "^4.0.5",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.1.1",
     "urijs": "^1.19.2",
-    "web3": "^1.2.9"
+    "url": "^0.11.0",
+    "util": "^0.12.3",
+    "web3": "^1.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.2",
@@ -57,17 +66,17 @@
     "eslint-plugin-node": "^10.0.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
-    "file-loader": "^4.2.0",
+    "file-loader": "^6.2.0",
     "jest": "^25.1.0",
-    "mini-css-extract-plugin": "^0.8.0",
+    "mini-css-extract-plugin": "^1.3.1",
-    "node-sass": "^4.13.1",
+    "node-sass": "^5.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.1.10",
-    "sass-loader": "^8.0.0",
+    "postcss-loader": "^4.1.0",
-    "style-loader": "^1.0.0",
+    "sass-loader": "^10.1.0",
-    "terser-webpack-plugin": "^2.2.1",
+    "style-loader": "^1.3.0",
-    "webpack": "^4.41.2",
+    "webpack": "^5.8.0",
-    "webpack-cli": "^3.3.10"
+    "webpack-cli": "^4.2.0"
   },
   "jest": {
     "moduleNameMapper": {

apps/block_scout_web/assets/webpack.config.js

@@ -29,9 +29,7 @@ function transpileViewScript(file) {
 };
 
 const jsOptimizationParams = {
-  cache: true,
+  parallel: true
-  parallel: true,
-  sourceMap: true
 }
 
 const awesompleteJs = {
@@ -149,6 +147,17 @@ const appJs =
         }
       ]
     },
+    resolve: {
+      fallback: {
+        "os": require.resolve("os-browserify/browser"),
+        "https": require.resolve("https-browserify"),
+        "http": require.resolve("stream-http"),
+        "crypto": require.resolve("crypto-browserify"),
+        "util": require.resolve("util/"),
+        "stream": require.resolve("stream-browserify"),
+        "assert": require.resolve("assert/"),
+      }
+    },
     plugins: [
       new MiniCssExtractPlugin({
         filename: '../css/[name].css'
@@ -163,7 +172,11 @@ const appJs =
       new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
       new webpack.DefinePlugin({
         'process.env.SOCKET_ROOT': JSON.stringify(process.env.SOCKET_ROOT)
-      })
+      }),
+      new webpack.ProvidePlugin({
+        process: 'process/browser',
+        Buffer: ['buffer', 'Buffer'],
+      }),
     ]
   }