Upgrade Webpack + loaders + plugins

dev.config.js

@@ -19,18 +19,14 @@ module.exports = env => ({
     rules: [
       {
         test: /\.(png|jpg|svg)$/,
-        loader: "url-loader"
+        type: "asset/inline"
       },
       {
         test: /\.(html)$/,
         use: {
           loader: "html-loader",
           options: {
             minimize: true,
-            removeAttributeQuotes: false,
-            caseSensitive: true,
-            customAttrSurround: [[/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/]],
-            customAttrAssign: [/\)?\]?=/]
           }
         }
       },
@@ -92,31 +88,32 @@ module.exports = env => ({
   target: "web",
   devServer: {
     hot: true,
-    disableHostCheck: true,
     historyApiFallback: true,
-    proxy: {
-      "/api": "http://localhost:3002"
-    },
-    https: false,
+    proxy: [
+      {
+        context: ["/api"],
+        target: "http://localhost:3002",
+      },
+    ],
     port: 3035,
-    inline: true,
     headers: { "Access-Control-Allow-Origin": "*" },
-    watchOptions: { ignored: /node_modules/ }
+  },
+  optimization: {
+    moduleIds: "named",
   },
   plugins: [
     new ForkTsCheckerWebpackPlugin({
       checkSyntacticErrors: true,
       async: false
     }),
-    new webpack.NamedModulesPlugin(),
     new MiniCssExtractPlugin({
       filename: `makerspace-react.css`
     }),
     new HtmlWebPackPlugin({
       template: "./src/assets/index.html",
       filename: "./index.html"
     }),
-    new CopyWebpackPlugin([{ from: "src/assets/favicon.png", to: "favicon.png" }]),
+    new CopyWebpackPlugin({ patterns: [{ from: "src/assets/favicon.png", to: "favicon.png" }] }),
     new webpack.EnvironmentPlugin({
       BILLING_ENABLED: true,
       BASE_URL: (env && env.BASE_URL) || ""

package.json

@@ -64,22 +64,23 @@
     "@wdio/selenium-standalone-service": "5.16.10",
     "@wdio/spec-reporter": "5.23.0",
     "@wdio/static-server-service": "^6.10.10",
+    "@webpack-cli/serve": "^3.0.1",
     "allure-commandline": "2.17.2",
     "babel-loader": "^8.0.6",
     "babel-plugin-inline-react-svg": "^1.1.1",
     "babel-preset-react": "^6.24.1",
     "cache-loader": "^4.0.1",
     "chai": "^4.2.0",
-    "copy-webpack-plugin": "^5.0.3",
-    "css-loader": "^3.0.0",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
     "dotenv": "^6.0.0",
     "fork-ts-checker-webpack-plugin": "^3.1.1",
     "googleapis": "^40.0.1",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
+    "html-loader": "^5.1.0",
+    "html-webpack-plugin": "^5.6.3",
     "jest": "^24.1.0",
     "makerspace-ts-mock-client": "0.8.1",
-    "mini-css-extract-plugin": "^0.7.0",
+    "mini-css-extract-plugin": "^2.9.2",
     "mocha": "^7.0.1",
     "mockserver-client": "^5.3.0",
     "mockserver-node": "^5.3.0",
@@ -99,20 +100,19 @@
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "tslint": "^5.18.0",
     "tslint-loader": "^3.5.4",
-    "typescript": "^3.5.3",
-    "url-loader": "^2.0.1",
+    "typescript": "^5.7.3",
     "webdriverio": "5.18.6",
-    "webpack": "^4.35.0",
+    "webpack": "^5.97.1",
     "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-cli": "^3.3.3",
-    "webpack-dev-server": "3.7.2"
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
   },
   "scripts": {
     "clean": "rm -fr ./node_modules ./dist",
-    "start": "$(npm bin)/webpack-dev-server --config dev.config.js",
+    "start": "webpack serve --config dev.config.js",
     "open": "yarn start --open",
-    "build": "$(npm bin)/webpack --config prod.config.js",
-    "test": "$(npm bin)/jest --no-cache",
+    "build": "webpack --config prod.config.js",
+    "test": "jest --no-cache",
     "test-watch": "yarn test --watch",
     "wdio": "TS_NODE_PROJECT=./tsconfig.wdio.json wdio tests/config/wdio.conf.js",
     "wdio-local": "rm -fr ./tmp/screenshots && yarn build && STATIC_SERVER=true yarn wdio",

prod.config.js

@@ -22,18 +22,14 @@ module.exports = env => ({
     rules: [
       {
         test: /\.(png|jpg|svg)$/,
-        loader: "url-loader"
+        type: "asset/inline"
       },
       {
         test: /\.(html)$/,
         use: {
           loader: "html-loader",
           options: {
             minimize: true,
-            removeAttributeQuotes: false,
-            caseSensitive: true,
-            customAttrSurround: [[/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/]],
-            customAttrAssign: [/\)?\]?=/]
           }
         }
       },
@@ -92,20 +88,22 @@ module.exports = env => ({
   },
   context: __dirname,
   target: "web",
+  optimization: {
+    moduleIds: "named",
+  },
   plugins: [
     new ForkTsCheckerWebpackPlugin({
       checkSyntacticErrors: true,
-      async: false
+      async: false,
     }),
-    new webpack.NamedModulesPlugin(),
     new MiniCssExtractPlugin({
       filename: `makerspace-react.css`
     }),
     new HtmlWebPackPlugin({
       template: "./src/assets/index.html",
       filename: "./index.html"
     }),
-    new CopyWebpackPlugin([{ from: "src/assets/favicon.png", to: "favicon.png" }]),
+    new CopyWebpackPlugin({ patterns: [{ from: "src/assets/favicon.png", to: "favicon.png" }] }),
     new webpack.EnvironmentPlugin({
       BILLING_ENABLED: true,
       BASE_URL: (env && env.BASE_URL) || ""

src/ui/common/DetailView.tsx

@@ -36,7 +36,7 @@ const DetailView: React.FC<OwnProps> = ({
 }) => {
   const resourcesExist = Array.isArray(resources) && !!resources.length;
   const [activeResource, setActiveResource] = React.useState<Resource>(resourcesExist ? resources[0] : undefined);
-  const { match: { params: { resource }}, history, location: { pathname } } = useReactRouter();
+  const { match: { params: { resource }}, history, location: { pathname } } = useReactRouter<{ resource: string }>();
 
   React.useEffect(() => {
     resource && changeResource(resource);

src/ui/common/Form.tsx

@@ -118,11 +118,11 @@ class Form extends React.Component<FormModalProps, State> {
   };
 
   public setFormState = (newState: Partial<State>) => {
-    return new Promise((resolve) => this.setState(state => (merge({}, state, newState)), resolve))
+    return new Promise<void>((resolve) => this.setState(state => (merge({}, state, newState)), resolve))
   };
 
   public setValue = (fieldName: string, value: any) => {
-    return new Promise((resolve) => this.setState(state => ({
+    return new Promise<void>((resolve) => this.setState(state => ({
       values: {
           ...state.values,
           [fieldName]: isUndefined(value) ? null : value
@@ -131,7 +131,7 @@ class Form extends React.Component<FormModalProps, State> {
   }
 
   public setError = (fieldName: string, error: string) => {
-    return new Promise((resolve) => this.setState(state => ({
+    return new Promise<void>((resolve) => this.setState(state => ({
       errors: {
         ...isUndefined(error) ? {
           ...omit(state.errors, [fieldName])

src/ui/hooks/useSubresourcePath.ts

@@ -6,7 +6,7 @@ import useReactRouter from "use-react-router";
  * @param options Subpaths
  */
 export default function useSubresourcePath(options: string[]) {
-  const { match: { params: { resource }}, history, location: { pathname } } = useReactRouter();
+  const { match: { params: { resource }}, history, location: { pathname } } = useReactRouter<{ resource: string }>();
 
   const changeResource = React.useCallback((newActiveName: string) => {
     const newResource = options.find(opt => opt === newActiveName);

src/ui/member/utils.ts

@@ -3,7 +3,6 @@ import { RenewalEntity } from "ui/common/RenewalForm";
 import { Properties } from "app/entities/member";
 import { timeToDate } from "ui/utils/timeToDate";
 import { Routing } from "app/constants";
-import { isObject } from "util";
 
 export const memberToRenewal = (member: Member | MemberSummary): RenewalEntity => {
   return {
@@ -18,7 +17,7 @@ export const memberIsAdmin = (member: Member | MemberSummary): boolean => {
 }
 
 export const displayMemberExpiration = (member: Member | MemberSummary | number) => {
-  const expirationTime = isObject(member) ? (member as MemberSummary).expirationTime : member as number;
+  const expirationTime = member !== null && typeof member == "object" ? (member as MemberSummary).expirationTime : member as number;
   return expirationTime ? timeToDate(expirationTime) : "N/A";
 }
 

tsconfig.base.json

@@ -14,13 +14,11 @@
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "noImplicitAny": true,
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "removeComments": false,
     "preserveConstEnums": true,
     "skipLibCheck": true,
-    "suppressImplicitAnyIndexErrors": true,
     "lib": [
       "es6",
       "dom",