Add react-refresh webpack plugin for development (#9496)

GitOrigin-RevId: 6dbfd0f9474c3a7fe4a5fdc5b5b2d59f64e56ce8

services/web/package.json

@@ -84,6 +84,7 @@
     "@overleaf/object-persistor": "^1.0.1",
     "@overleaf/redis-wrapper": "^2.0.0",
     "@overleaf/settings": "^3.0.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@pollyjs/adapter-node-http": "^4.2.1",
     "@pollyjs/core": "^4.2.1",
     "@pollyjs/persister-fs": "^4.2.1",
@@ -197,6 +198,7 @@
     "react-error-boundary": "^2.3.1",
     "react-i18next": "^11.7.1",
     "react-linkify": "^1.0.0-alpha",
+    "react-refresh": "^0.14.0",
     "react2angular": "^4.0.6",
     "react2angular-shared-context": "^1.1.0",
     "recurly": "^4.0.0",

services/web/webpack.config.dev.js

@@ -1,6 +1,9 @@
 const webpack = require('webpack')
 const { merge } = require('webpack-merge')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
+
+process.env.REACT_REFRESH = '1'
 
 const base = require('./webpack.config')
 
@@ -42,6 +45,8 @@ module.exports = merge(base, {
       filename: 'stylesheets/[name].css',
     }),
 
+    new ReactRefreshWebpackPlugin(),
+
     // Disable React DevTools if DISABLE_REACT_DEVTOOLS is set to "true"
     process.env.DISABLE_REACT_DEVTOOLS === 'true' &&
       new webpack.DefinePlugin({
@@ -56,6 +61,7 @@ module.exports = merge(base, {
     client: {
       webSocketURL: 'auto://0.0.0.0:0/ws',
     },
+    hot: true,
     allowedHosts: '.dev-overleaf.com',
     setupMiddlewares(middlewares, devServer) {
       devServer.app.get('/status', (req, res) => res.send('webpack is up'))

services/web/webpack.config.js

@@ -100,6 +100,9 @@ module.exports = {
               // subsequent compile runs are much faster
               cacheDirectory: true,
               configFile: path.join(__dirname, './babel.config.json'),
+              plugins: [
+                process.env.REACT_REFRESH && 'react-refresh/babel',
+              ].filter(Boolean),
             },
           },
         ],