Upgrade webpack 5

Author: Ndifreke

.eslintrc

@@ -29,10 +29,12 @@
   },
 
   "plugins": [
-    "prettier",
-    "no-unused-vars-rest"
+    "prettier"
+  ],
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    // "plugin:@typescript-eslint/recommended-requiring-type-checking"
   ],
-
   "rules": {
     "prettier/prettier": "error"
   },
@@ -46,10 +48,11 @@
         "jsx-a11y",
         "@typescript-eslint"
       ],
-      "parser": "@typescript-eslint/parser",
+      "parser": "@babel/eslint-parser",
       "rules": {
-        "no-unused-vars": "off",
-        "@typescript-eslint/no-unused-vars": "error"
+        "no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }]
+        // "no-unused-vars": "off",
+        // "@typescript-eslint/no-unused-vars": "error"
       }
     }
   ]

package.json

@@ -6,8 +6,8 @@
   "main": "lib/server/platform-api.js",
   "types": "types/index.d.ts",
   "scripts": {
-    "build": "rm -rf ./types && rm -rf ./lib && webpack --env.mode=build && mv types/src/* types/ && rm -r types/src",
-    "dev": "webpack --progress --colors --watch --env.mode=dev",
+    "build": "rm -rf ./types && rm -rf ./lib && webpack --env MODE=build && mv types/src/* types/ && rm -r types/src",
+    "dev": "webpack --progress  --watch --env MODE=dev",
     "test": "npm run test-web && npm run test-node",
     "test-web": "mocha -r mock-local-storage ./test/.setup.js ./test/**/*.spec.js",
     "test-node": "mocha -r ./test/.setup-node.js ./test/**/*.spec.js",
@@ -18,6 +18,7 @@
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
+    "@babel/eslint-parser": "^7.21.3",
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-typescript": "^7.16.7",
@@ -27,15 +28,13 @@
     "@types/is-url": "^1.2.30",
     "@types/node": "^17.0.10",
     "@types/object.pick": "^1.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@typescript-eslint/parser": "^5.9.1",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
     "babel-eslint": "10.1.0",
-    "babel-loader": "8.1.0",
+    "babel-loader": "9.1.2",
     "chai": "3.5.0",
-    "eslint": "^4.18.2",
-    "eslint-loader": "1.6.3",
-    "eslint-plugin-no-unused-vars-rest": "^1.0.4",
+    "eslint": "^8.36.0",
     "eslint-plugin-prettier": "^2.7.0",
+    "eslint-webpack-plugin": "^4.0.0",
     "fake-fetch": "^1.0.0",
     "fetch-mock": "^5.9.4",
     "husky": "^0.14.3",
@@ -45,11 +44,10 @@
     "mock-local-storage": "^1.1.8",
     "prettier": "1.13.4",
     "sinon": "^1.17.6",
-    "terser-webpack-plugin": "^2.3.6",
+    "terser-webpack-plugin": "^5.3.7",
     "ts-node": "^10.4.0",
     "typescript": "^4.5.4",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
+    "webpack-cli": "^5.0.1",
     "webpack-merge": "^4.2.2",
     "yargs": "6.6.0"
   },
@@ -63,20 +61,27 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@typescript-eslint/parser": "^5.55.0",
     "atob": "^2.1.2",
     "basename": "^0.1.2",
+    "circular-dependency-plugin": "^5.2.2",
     "detect-node": "^2.0.4",
     "email-validator": "^1.0.7",
     "es6-promise": "4.2.6",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "is-scalar": "^1.0.2",
     "is-url": "^1.2.2",
     "isomorphic-fetch": "^3.0.0",
     "oauth2-popup-flow": "^1.1.0",
     "object.pick": "^1.3.0",
     "parse_url": "^0.1.1",
+    "path-browserify": "^1.0.1",
     "slugify": "^1.3.4",
     "to-querystring": "^1.1.3",
-    "ts-loader": "~8.2.0",
-    "url-pattern": "^1.0.3"
+    "ts-loader": "~9.4.2",
+    "url-pattern": "^1.0.3",
+    "webpack": "^5.76.1"
   }
 }

webpack.config.js

@@ -3,10 +3,24 @@ const TerserPlugin = require("terser-webpack-plugin");
 var path = require("path");
 var env = require("yargs").argv.env;
 var merge = require("webpack-merge");
-
+const CircularDependencyPlugin = require("circular-dependency-plugin");
 var libraryName = "platform-api";
 
-var plugins = [],
+var plugins = [
+    new CircularDependencyPlugin({
+      // exclude detection of files based on a RegExp
+      exclude: /a\.js|node_modules/,
+      // include specific files based on a RegExp
+      include: /src/,
+      // add errors to webpack instead of warnings
+      failOnError: true,
+      // allow import cycles that include an asyncronous import,
+      // e.g. via import(/* webpackMode: "weak" */ './file.js')
+      allowAsyncCycles: false,
+      // set the current working directory for displaying module paths
+      cwd: process.cwd()
+    })
+  ],
   outputFile;
 let additionalSettings = {};
 
@@ -29,7 +43,7 @@ var config = {
     filename: outputFile
   },
   watchOptions: {
-    ignored: [/node_modules/, /types/]
+    ignored: /(node_modules|types)/
   },
   module: {
     rules: [
@@ -47,7 +61,10 @@ var config = {
   },
   resolve: {
     modules: [path.resolve("./src"), "node_modules"],
-    extensions: [".js", ".ts"]
+    extensions: [".js", ".ts"],
+    fallback: {
+      path: require.resolve("path-browserify")
+    }
   },
   plugins: plugins,
   ...additionalSettings