Replace deprecated `react-hot-loader` plugin with `react-refresh`

Signed-off-by: Mihaela Balutoiu <mbalutoiu@cloudbasesolutions.com>

babel.config.js

@@ -8,7 +8,6 @@ module.exports = api => {
       "@babel/react",
     ],
     plugins: [
-      "react-hot-loader/babel",
       [
         "@babel/plugin-proposal-decorators",
         {
@@ -20,6 +19,16 @@ module.exports = api => {
       "@babel/plugin-proposal-optional-chaining",
     ],
   };
+
+  if (process.env.NODE_ENV === "development") {
+    common.plugins.push([
+      "react-refresh/babel",
+      {
+        skipEnvCheck: true,
+      },
+    ]);
+  }
+
   if (
     process.env.NODE_ENV === "development" ||
     process.env.NODE_ENV === "test"

webpack.common.js

@@ -15,6 +15,7 @@ const envKeys = Object.keys(env).reduce((prev, next) => {
 }, {});
 
 envKeys['process.env'] = JSON.stringify(env);
+const isDevelopment = process.env.NODE_ENV === "development";
 
 module.exports = {
   entry: "./src/index.tsx",
@@ -55,7 +56,16 @@ module.exports = {
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        loader: require.resolve("babel-loader"),
+        use: [
+          {
+            loader: require.resolve("babel-loader"),
+            options: {
+              plugins: [
+                isDevelopment && require.resolve("react-refresh/babel"),
+              ].filter(Boolean),
+            },
+          },
+        ],
       },
       {
         test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/,
@@ -74,7 +84,7 @@ module.exports = {
   optimization: {
     splitChunks: {
       cacheGroups: {
-        vendor: {
+        defaultVendors: {
           test: /node_modules/,
           chunks: "initial",
           name: "vendor",

webpack.dev.js

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { merge } = require("webpack-merge");
+const webpack = require("webpack");
 const common = require("./webpack.common");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 
 module.exports = merge(common, {
   mode: "development",
@@ -15,4 +17,8 @@ module.exports = merge(common, {
     },
     stats: "minimal",
   },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new ReactRefreshWebpackPlugin({ overlay: false }),
+  ].filter(Boolean),
 });