Replace react-hot-loader with react-refresh

babel.config.js

@@ -85,7 +85,6 @@ module.exports = function (api) {
       ],
     },
     ],
-    isDevelopmentEnv && 'react-hot-loader/babel',
   ].filter(Boolean);
 
   return {

package.json

@@ -59,7 +59,6 @@
     "react-dnd-multi-backend": "^5.0.0",
     "react-dnd-touch-backend": "^10.0.2",
     "react-full-screen": "^0.2.4",
-    "react-hot-loader": "^4.12.21",
     "react-i18next": "^11.7.0",
     "react-image": "^4.0.1",
     "react-mosaic-component": "^4.0.1",
@@ -85,6 +84,7 @@
     "@babel/plugin-transform-runtime": "^7.10.3",
     "@babel/preset-env": "^7.10.3",
     "@babel/preset-react": "^7.10.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.3.3",
     "babel-eslint": "10.1.0",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.0.6",
@@ -117,6 +117,7 @@
     "react": "^16.8.6",
     "react-dev-utils": "^10.2.1",
     "react-dom": "^16.8.6",
+    "react-refresh": "^0.8.3",
     "redux-mock-store": "^1.5.1",
     "redux-saga-test-plan": "^4.0.0-rc.3",
     "style-loader": "^1.2.1",

src/components/App.js

 import React, { Component, lazy, Suspense } from 'react';
-import { hot } from 'react-hot-loader/root';
 import PropTypes from 'prop-types';
 import PluginProvider from '../extend/PluginProvider';
 import AppProviders from '../containers/AppProviders';
@@ -46,4 +45,4 @@ App.defaultProps = {
   plugins: [],
 };
 
-export default hot(App);
+export default App;

webpack.config.js

 const path = require('path');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const paths = require('./config/paths');
 
 /** */
@@ -82,7 +83,11 @@ module.exports = (env, options) => {
       port: 4444,
     },
     devtool: 'eval-source-map',
-    entry: ['react-hot-loader/patch', './src/polyfills.js', './src/init.js'],
+    entry: ['./src/polyfills.js', './src/init.js'],
     mode: 'development',
+    plugins: [
+      ...(config.plugins || []),
+      new ReactRefreshWebpackPlugin(),
+    ],
   };
 };