diff --git a/babel.config.js b/babel.config.js index 9e82d43dd8d175723a0631934e74fdea20c5b112..71e3e16ee133e18ccca49b8f41da25143ffc0c8f 100644 --- 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 index 0c8d0bd2bb705ac087a78e7b815fa5b3fa85cb58..cfff55111e7354dd768e85d6c8d3735048ffc363 100644 --- 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 index 279dd8f6b80977fc367458c59780ef40fe55c5c5..a415d6ff823e2b900aa84345f993ccf874858530 100644 --- 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 index ad7fe771ff3a33180d1e905051db92556a93c8d8..768d17f58af2b14e02cfcab16d3f55d7c51af50a 100644 --- 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(), + ], }; };