Replace react-hot-loader with react-refresh

ProjectMirador · Jul 14, 2020 · efcc5f3 · efcc5f3
1 parent 6cf20fe
commit efcc5f3
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -85,7 +85,6 @@ module.exports = function (api) {
       ],
     },
     ],
-    isDevelopmentEnv && 'react-hot-loader/babel',
   ].filter(Boolean);
 
   return {

diff --git a/package.json b/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",

diff --git a/src/components/App.js b/src/components/App.js
@@ -1,5 +1,4 @@
 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;
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,7 @@
 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(),
+    ],
   };
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -85,7 +85,6 @@ module.exports = function (api) { @@
           ],
         },
         ],
-        isDevelopmentEnv && 'react-hot-loader/babel',
       ].filter(Boolean);
       return {
@@ Expand Down @@