Merge pull request #952 from usmaniqbal998/add-react-refresh

Replace React Hot Loader with React Fast Refresh

Author: HashemKhalifa

babel.config.js

@@ -20,7 +20,6 @@ module.exports = function babelConfig(api) {
     'transform-react-remove-prop-types',
     'transform-react-pure-class-to-function',
     '@babel/plugin-transform-runtime',
-    'react-hot-loader/babel',
 
     // Stage 2 https://github.com/babel/babel/tree/master/packages/babel-preset-stage-2
     ['@babel/plugin-proposal-decorators', { legacy: true }],

package.json

@@ -18,7 +18,6 @@
       "git add"
     ]
   },
-
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
@@ -38,7 +37,9 @@
       "^.+\\.(js|jsx)$": "babel-jest",
       ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
     },
-    "setupFilesAfterEnv": ["<rootDir>/setupTests.js"],
+    "setupFilesAfterEnv": [
+      "<rootDir>/setupTests.js"
+    ],
     "moduleFileExtensions": [
       "css",
       "scss",
@@ -58,15 +59,14 @@
   "dependencies": {
     "@babel/plugin-transform-react-constant-elements": "7.16.0",
     "@babel/plugin-transform-react-inline-elements": "7.16.0",
+    "babel-plugin-import": "^1.13.1",
     "babel-plugin-transform-react-pure-class-to-function": "1.0.1",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "babel-plugin-import": "^1.13.1",
     "core-js": "3.19.2",
     "lodash": "4.17.21",
     "prop-types": "15.7.2",
     "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-hot-loader": "4.13.0"
+    "react-dom": "16.14.0"
   },
   "resolutions": {
     "babel-core": "7.0.0-bridge.0"
@@ -84,15 +84,16 @@
     "@babel/plugin-syntax-import-meta": "7.10.4",
     "@babel/plugin-transform-runtime": "7.16.4",
     "@babel/preset-env": "7.16.4",
-    "babel-preset-react-optimize": "1.0.1",
     "@babel/preset-react": "7.16.0",
     "@babel/register": "7.16.0",
     "@babel/runtime": "7.16.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "25.5.1",
     "babel-loader": "8.2.3",
     "babel-plugin-lodash": "3.3.4",
+    "babel-preset-react-optimize": "1.0.1",
     "browserslist": "4.18.1",
     "clean-webpack-plugin": "3.0.0",
     "connect-history-api-fallback": "1.6.0",
@@ -103,37 +104,38 @@
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "7.2.0",
-    "eslint-webpack-plugin": "2.6.0",
     "eslint-plugin-import": "2.25.3",
     "eslint-plugin-jest": "23.20.0",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "3.4.1",
     "eslint-plugin-react": "7.27.1",
     "eslint-watch": "7.0.0",
+    "eslint-webpack-plugin": "2.6.0",
     "file-loader": "6.2.0",
-    "koa-connect": "2.1.0",
     "html-webpack-plugin": "4.5.2",
-    "script-ext-html-webpack-plugin": "2.1.5",
     "husky": "6.0.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "25.5.4",
     "jest-css-modules-transform": "4.3.0",
     "jest-enzyme": "7.1.2",
     "jest-fetch-mock": "3.0.3",
     "jsdom": "16.7.0",
+    "koa-connect": "2.1.0",
     "lint-staged": "11.2.6",
     "mini-css-extract-plugin": "0.12.0",
-    "sass": "1.44.0",
     "npm-check-updates": "10.3.1",
+    "optimize-css-assets-webpack-plugin": "6.0.1",
     "prettier": "2.5.0",
     "pretty-quick": "2.0.2",
+    "react-refresh": "^0.11.0",
+    "sass": "1.44.0",
     "sass-loader": "8.0.2",
+    "script-ext-html-webpack-plugin": "2.1.5",
     "style-loader": "1.3.0",
+    "terser-webpack-plugin": "4.2.3",
     "webpack": "4.46.0",
     "webpack-cli": "4.9.1",
     "webpack-dev-server": "3.11.3",
-    "optimize-css-assets-webpack-plugin": "6.0.1",
-    "terser-webpack-plugin": "4.2.3",
     "webpack-merge": "4.2.2"
   }
 }

readme.md

@@ -79,5 +79,5 @@ webpack
 - [Style](https://github.com/webpack-contrib/style-loader) & [CSS Loader](https://github.com/webpack-contrib/css-loader) & [SASS-loader](https://github.com/webpack-contrib/sass-loader)
 - [CSS modules](https://github.com/css-modules/css-modules) [ Isolated style based on each component ]
 - [Browsers list](https://github.com/browserslist/browserslist) [ Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env ]
-- [React hot loader](https://github.com/gaearon/react-hot-loader)
+  [React Fast Refresh](https://github.com/pmmmwh/react-refresh-webpack-plugin)[For react hot module replacement]
 - [Webpack dev serve](https://github.com/webpack/webpack-dev-server)

src/App.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { hot } from 'react-hot-loader/root';
+
 import HelloWorld from './components/hello-world';
 
 class App extends Component {
@@ -13,4 +13,4 @@ class App extends Component {
   }
 }
 
-export default hot(App);
+export default App;

webpack/webpack.common.js

@@ -10,20 +10,6 @@ module.exports = {
   entry: commonPaths.entryPath,
   module: {
     rules: [
-      {
-        test: /\.(js|jsx)$/,
-        loader: 'babel-loader',
-        exclude: /(node_modules)/,
-        options: {
-          presets: ['@babel/react'],
-          plugins: [['import', { libraryName: 'antd', style: true }]],
-        },
-      },
-      {
-        test: /\.(js|jsx)$/,
-        use: 'react-hot-loader/webpack',
-        include: /node_modules/,
-      },
       {
         test: /\.(png|jpg|gif|svg)$/,
         use: [

webpack/webpack.dev.js

@@ -1,5 +1,4 @@
-const webpack = require('webpack');
-
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const commonPaths = require('./paths');
 
 module.exports = {
@@ -11,6 +10,18 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'babel-loader',
+        exclude: /(node_modules)/,
+        options: {
+          presets: ['@babel/react'],
+          plugins: [
+            ['import', { libraryName: 'antd', style: true }],
+            require.resolve('react-refresh/babel'),
+          ].filter(Boolean),
+        },
+      },
       {
         test: /\.(css|scss)$/,
         use: [
@@ -35,5 +46,5 @@ module.exports = {
     compress: true,
     hot: true,
   },
-  plugins: [new webpack.HotModuleReplacementPlugin()],
+  plugins: [new ReactRefreshWebpackPlugin()],
 };

webpack/webpack.prod.js

@@ -49,6 +49,15 @@ module.exports = {
 
   module: {
     rules: [
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'babel-loader',
+        exclude: /(node_modules)/,
+        options: {
+          presets: ['@babel/react'],
+          plugins: [['import', { libraryName: 'antd', style: true }]],
+        },
+      },
       {
         test: /\.(css|scss)$/,
         use: [