[ALTA-81] 🔄 (Webpack) Add react-refresh for persistent component state across hot reloads! (#9)

Author: emilyemorehouse

internals/webpack/webpack.base.babel.js

@@ -25,7 +25,13 @@ module.exports = options => ({
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
-          options: options.babelQuery,
+          options: {
+            ...options.babelQuery,
+            // DO NOT apply the Babel plugin in production mode!
+            plugins: [
+              options.mode === 'development' && require.resolve('react-refresh/babel'),
+            ].filter(Boolean),
+          },
         },
       },
       {

internals/webpack/webpack.dev.babel.js

@@ -6,6 +6,7 @@ const path = require('path')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CircularDependencyPlugin = require('circular-dependency-plugin')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 
 module.exports = require('./webpack.base.babel')({
   mode: 'development',
@@ -31,6 +32,7 @@ module.exports = require('./webpack.base.babel')({
 
   // Add development plugins
   plugins: [
+    new ReactRefreshWebpackPlugin(),
     new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
     new HtmlWebpackPlugin({
       inject: true, // Inject all files that are generated by webpack, e.g. bundle.js

package-lock.json

@@ -160,6 +160,7 @@
     "@babel/preset-react": "7.10.4",
     "@babel/register": "7.10.5",
     "@cypress/code-coverage": "^3.8.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
     "@testing-library/cypress": "^6.0.0",
     "@testing-library/jest-dom": "^5.11.1",
     "@testing-library/react": "^10.4.0",
@@ -211,6 +212,7 @@
     "prettier": "1.19.1",
     "react-app-polyfill": "1.0.6",
     "react-desc": "^4.1.2",
+    "react-refresh": "^0.8.3",
     "react-test-renderer": "^16.13.0",
     "rimraf": "3.0.2",
     "shelljs": "^0.8.3",