...

4 files changed, 17 insertions, 23 deletions

diff --git a/FrontEnd/package.json b/FrontEnd/package.json
index 65c5cbe2..12f3fbea 100644
--- a/FrontEnd/package.json
+++ b/FrontEnd/package.json
@@ -20,7 +20,6 @@
     "react": "^17.0.1",

     "react-bootstrap": "^1.4.0",

     "react-dom": "^17.0.1",

-    "react-hot-loader": "^4.13.0",

     "react-i18next": "^11.7.3",

     "react-inlinesvg": "^2.1.1",

     "react-responsive": "^8.1.0",

@@ -36,7 +35,7 @@
     "xregexp": "^4.3.0"

   },

   "scripts": {

-    "start": "webpack-dev-server --config ./webpack.config.dev.js",

+    "start": "webpack serve --config ./webpack.config.dev.js",

     "build": "webpack --config ./webpack.config.prod.js",

     "lint": "eslint src/ --ext .js --ext .jsx --ext .ts --ext .tsx"

   },

@@ -62,7 +61,7 @@
     "@babel/preset-env": "^7.12.1",

     "@babel/preset-react": "^7.12.1",

     "@babel/preset-typescript": "^7.12.1",

-    "@hot-loader/react-dom": "^17.0.0",

+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",

     "@types/classnames": "^2.2.10",

     "@types/lodash": "^4.14.162",

     "@types/node": "^14.14.5",

@@ -96,13 +95,16 @@
     "postcss-loader": "^4.0.4",

     "postcss-preset-env": "^6.7.0",

     "prettier": "^2.1.2",

+    "querystring-es3": "^0.2.1",

+    "react-refresh": "^0.9.0",

     "sass": "^1.27.0",

     "sass-loader": "^10.0.4",

     "style-loader": "^2.0.0",

     "ts-loader": "^8.0.7",

+    "type-fest": "^0.18.0",

     "typescript": "^4.0.5",

     "url-loader": "^4.1.1",

-    "webpack": "^5.2.0",

+    "webpack": "^5.2.1",

     "webpack-chain": "^6.5.1",

     "webpack-cli": "^4.1.0",

     "webpack-dev-server": "^3.11.0",

diff --git a/FrontEnd/src/app/App.tsx b/FrontEnd/src/app/App.tsx
index b68eddb6..4e53d4da 100644
--- a/FrontEnd/src/app/App.tsx
+++ b/FrontEnd/src/app/App.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import { hot } from "react-hot-loader/root";
 
 import AppBar from "./views/common/AppBar";
 import LoadingPage from "./views/common/LoadingPage";
@@ -81,4 +80,4 @@ const App: React.FC = () => {
   }
 };
 
-export default hot(App);
+export default App;
diff --git a/FrontEnd/src/app/i18n.ts b/FrontEnd/src/app/i18n.ts
index cdced7bf..aeac1f1f 100644
--- a/FrontEnd/src/app/i18n.ts
+++ b/FrontEnd/src/app/i18n.ts
@@ -18,18 +18,10 @@ const backend: BackendModule = {
     }
 
     if (language === "en") {
-      const res = (
-        await import(
-          /* webpackChunkName: "locales-en" */ "./locales/en/translation"
-        )
-      ).default;
+      const res = (await import("./locales/en/translation")).default;
       success(res);
     } else if (language === "zh-cn" || language === "zh") {
-      const res = (
-        await import(
-          /* webpackChunkName: "locales-zh" */ "./locales/zh/translation"
-        )
-      ).default;
+      const res = (await import("./locales/zh/translation")).default;
       success(res);
     } else {
       error(`Language ${language} is not supported.`);
diff --git a/FrontEnd/webpack.config.dev.js b/FrontEnd/webpack.config.dev.js
index c88e1aaf..937ab3fb 100644
--- a/FrontEnd/webpack.config.dev.js
+++ b/FrontEnd/webpack.config.dev.js
@@ -1,24 +1,23 @@
 const path = require("path");

 const webpack = require("webpack");

+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

 

 const config = require("./webpack.common");

 

 config.mode("development");

 

-config.entry("index").add("react-hot-loader/patch");

-

 config.module

   .rule("ts")

   .use("babel")

   .options({

-    plugins: ["react-hot-loader/babel"],

+    plugins: ["react-refresh/babel"],

   });

 

 config.module

   .rule("js")

   .use("babel")

   .options({

-    plugins: ["react-hot-loader/babel"],

+    plugins: ["react-refresh/babel"],

   });

 

 config.module

@@ -37,16 +36,18 @@ config.module
 

 config.devtool("eval-cheap-module-source-map");

 

-config.resolve.alias.set("react-dom", "@hot-loader/react-dom");

+config.resolve.set("fallback", {

+  querystring: require.resolve("querystring-es3"),

+});

 

 config.devServer

   .contentBase(path.resolve(__dirname, "public/"))

   .host("0.0.0.0")

   .port(3000)

   .historyApiFallback(true)

-  .hotOnly(true)

-  .allowedHosts.add(".myide.io");

+  .hotOnly(true);

 

 config.plugin("hot").use(webpack.HotModuleReplacementPlugin);

+config.plugin("react-refresh").use(new ReactRefreshWebpackPlugin());

 

 module.exports = config.toConfig();