Added HMR to webpack

dashboard/package-lock.json

@@ -2616,6 +2616,39 @@
         }
       }
     },
+    "@pmmmwh/react-refresh-webpack-plugin": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz",
+      "integrity": "sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==",
+      "dev": true,
+      "requires": {
+        "ansi-html": "^0.0.7",
+        "error-stack-parser": "^2.0.6",
+        "html-entities": "^1.2.1",
+        "native-url": "^0.2.6",
+        "schema-utils": "^2.6.5",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        }
+      }
+    },
     "@polka/url": {
       "version": "1.0.0-next.17",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.17.tgz",
@@ -5820,6 +5853,15 @@
         "prr": "~1.0.1"
       }
     },
+    "error-stack-parser": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
+      "integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
+      "dev": true,
+      "requires": {
+        "stackframe": "^1.1.1"
+      }
+    },
     "es-abstract": {
       "version": "1.18.0-next.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
@@ -8332,6 +8374,15 @@
         "to-regex": "^3.0.1"
       }
     },
+    "native-url": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz",
+      "integrity": "sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==",
+      "dev": true,
+      "requires": {
+        "querystring": "^0.2.0"
+      }
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -9212,6 +9263,12 @@
         "warning": "^4.0.3"
       }
     },
+    "react-refresh": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.10.0.tgz",
+      "integrity": "sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==",
+      "dev": true
+    },
     "react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -10243,6 +10300,12 @@
         "figgy-pudding": "^3.5.1"
       }
     },
+    "stackframe": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
+      "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==",
+      "dev": true
+    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",

dashboard/package.json

@@ -53,6 +53,7 @@
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -83,6 +84,7 @@
     "html-webpack-plugin": "^4.5.0",
     "prettier": "2.2.1",
     "qs": "^6.9.4",
+    "react-refresh": "^0.10.0",
     "source-map-loader": "^1.1.0",
     "terser-webpack-plugin": "^4.2.3",
     "ts-loader": "^8.0.4",

dashboard/webpack.config.js

@@ -1,6 +1,8 @@
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const webpack = require("webpack");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+
 const dotenv = require("dotenv");
 
 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
@@ -31,7 +33,16 @@ module.exports = () => {
         {
           test: /\.(ts|tsx|mjs|js|jsx)$/,
           exclude: /node_modules/,
-          loader: "babel-loader",
+          use: [
+            {
+              loader: require.resolve("babel-loader"),
+              options: {
+                plugins: [
+                  isDevelopment && require.resolve("react-refresh/babel"),
+                ].filter(Boolean),
+              },
+            },
+          ],
         },
         {
           enforce: "pre",
@@ -70,7 +81,7 @@ module.exports = () => {
       historyApiFallback: true,
       disableHostCheck: true,
       host: "0.0.0.0",
-      port: 8080,
+      port: 8081,
       hot: true,
     },
     plugins: [
@@ -79,7 +90,8 @@ module.exports = () => {
         segmentKey: `${process.env.SEGMENT_PUBLIC_KEY}`,
       }),
       new webpack.DefinePlugin(envKeys),
-    ],
+      isDevelopment && new ReactRefreshWebpackPlugin(),
+    ].filter(Boolean),
   };
 
   if (!isDevelopment) {