BREAKING: Bump to webpack 5; support Node.js >= 18 (#264)

* Update dependencies

* devdeps: webpack@4.43.0->4.46.0

* fix: set webpack hash function to fix nodejs v18 compatibility

* devDeps: webpack@^4.46.0->^5.89.0

- devDeps: webpack-cli@^3.3.12->^5.1.4
- devDeps: webpack-dev-server@^3.11.2->^4.15.1

* yarn deduplicate

* ci: run on Node.js v18,v20

* devDeps: @lavamoat/allow-scripts@^2.0.3->^2.5.1

* update allow-scripts config

* webpack5 config update

* webpack: provide Buffer

* fix: work around default-exporting json module

See webpack/webpack#13469

* Remove Node 16 support

* Disable Webpack dev server overlay

---------

Co-authored-by: seaona <mariona@gmx.es>
Co-authored-by: Erik Marks <rekmarks@protonmail.com>

Author: 3 people

.github/workflows/build-lint-test.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-20.04
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x, 20.x]
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}

.nvmrc

@@ -1 +1 @@
-v16
+v18

package.json

@@ -3,7 +3,7 @@
   "version": "7.3.1",
   "description": "A simple dapp used in MetaMask e2e tests.",
   "engines": {
-    "node": ">= 16.0.0"
+    "node": ">= 18.0.0"
   },
   "scripts": {
     "setup": "yarn install && yarn allow-scripts",
@@ -36,15 +36,15 @@
   "homepage": "https://metamask.github.io/test-dapp",
   "dependencies": {},
   "devDependencies": {
-    "@lavamoat/allow-scripts": "^1.0.6",
+    "@lavamoat/allow-scripts": "^2.5.1",
     "@metamask/auto-changelog": "^2.5.0",
     "@metamask/eslint-config": "^6.0.0",
     "@metamask/eslint-config-nodejs": "^6.0.0",
     "@metamask/onboarding": "^1.0.0",
     "@openzeppelin/contracts": "4.9.3",
     "base64-sol": "1.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.0.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
     "eslint": "^7.29.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.23.4",
@@ -55,17 +55,17 @@
     "ethers": "^5.0.32",
     "gh-pages": "^3.1.0",
     "prettier": "^2.3.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "lavamoat": {
     "allowScripts": {
       "@lavamoat/preinstall-always-fail": false,
-      "sha3": true,
-      "secp256k1": true,
-      "keccak": true,
-      "fsevents": true
+      "eth-sig-util>ethereumjs-abi>ethereumjs-util>keccakjs>sha3": true,
+      "ethereumjs-util>keccak": true,
+      "ethereumjs-util>secp256k1": true
     }
-  }
+  },
+  "packageManager": "yarn@1.22.19"
 }

src/index.js

@@ -10,7 +10,9 @@ import {
 import { ethers } from 'ethers';
 import { toChecksumAddress } from 'ethereumjs-util';
 import { getPermissionsDisplayString, stringifiableToHex } from './utils';
-import {
+import Constants from './constants.json';
+
+const {
   hstBytecode,
   hstAbi,
   piggybankBytecode,
@@ -23,7 +25,7 @@ import {
   multisigBytecode,
   erc1155Abi,
   erc1155Bytecode,
-} from './constants.json';
+} = Constants;
 
 /**
  * Page

webpack.config.js

@@ -1,10 +1,17 @@
 const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { ProvidePlugin } = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 
 const DIST = path.resolve(__dirname, 'dist');
 
 module.exports = {
+  resolve: {
+    fallback: {
+      assert: false,
+      stream: false,
+    },
+  },
   devtool: 'eval-source-map',
   mode: 'development',
   entry: {
@@ -16,22 +23,34 @@ module.exports = {
     publicPath: DIST,
   },
   devServer: {
-    contentBase: DIST,
+    client: {
+      // This disables the error / warning overlay, which is distracting during
+      // local development of the test dapp.
+      overlay: false,
+    },
+    devMiddleware: {
+      writeToDisk: true,
+    },
     port: 9011,
-    writeToDisk: true,
+    static: {
+      directory: DIST,
+    },
   },
   plugins: [
+    new ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
     new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
 
     // for build scripts
     new CopyPlugin({
       patterns: [
         {
-          flatten: true,
           from: './src/*',
           globOptions: {
             ignore: ['**/*.js'],
           },
+          to: '[name][ext]',
         },
       ],
     }),