upgrade from webpack 4 to webpack 5

We want to dynamically import the bitbox02-api package and split it
out of the main bundle. After many different attempts we only found
that it works when upgrading to webpack 5, hence this commit.

The upgrade was performed by following
https://webpack.js.org/migrate/5/.

The `require.resolve('...`) additions were upgrade fixes suggested by
webpack itself on the command line.

Other references used:

webpack/changelog-v5#10 (comment)
https://stackoverflow.com/questions/41359504/webpack-bundle-js-uncaught-referenceerror-process-is-not-defined

.eslintrc

@@ -46,6 +46,11 @@
     "react": {
         "version": "16.8",
         "pragma": "h"
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
     }
   },
   "parser": "@typescript-eslint/parser",

package.json

@@ -62,11 +62,14 @@
     "mocha-headless-chrome": "^2.0.3",
     "moment": "^2.27.0",
     "normalize-url": "^4.0.0",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
     "redis": "^3.1.2",
     "redisscan": "^2.0.0",
+    "stream-browserify": "^3.0.0",
     "universal-analytics": "^0.4.20",
-    "webpack": "^4.1.1",
-    "webpack-dev-middleware": "^4.1.0",
+    "webpack": "^5.62.1",
+    "webpack-dev-middleware": "^5.2.1",
     "webpack-hot-middleware": "^2.25.1"
   },
   "devDependencies": {
@@ -96,7 +99,7 @@
     "ts-loader": "^6.2.1",
     "typescript": "3.9.2",
     "url-loader": "^4.1.1",
-    "webpack-cli": "^4.6.0"
+    "webpack-cli": "^4.9.1"
   },
   "resolutions": {
     "ssri": ">=8.0.1",

webpack.build.config.js

@@ -52,9 +52,6 @@ module.exports = {
     // to avoid including webpack's 'crypto' if window.crypto is available - reduces bundle size
     crypto: 'crypto',
   },
-  node: {
-    fs: 'empty',
-  },
   module: {
     rules: [
       {
@@ -126,6 +123,11 @@ module.exports = {
     ],
   },
   resolve: {
+    fallback: {
+      fs: false,
+      path: require.resolve('path-browserify'),
+      stream: require.resolve('stream-browserify'),
+    },
     alias: {
       'babel-runtime': '@babel/runtime', // so both ledger and trezor-connect use the same library for babel runtime
       'unistore': `${__dirname}/app/frontend/libs/unistore`,
@@ -140,5 +142,13 @@ module.exports = {
     isProd && new MiniCssExtractPlugin({
       filename: 'css/modules.css',
     }),
+    // Auto-import `Buffer`:
+    // https://github.com/webpack/changelog-v5/issues/10#issuecomment-615877593
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
   ].filter(Boolean),
 }