From a6e3398e0635a0dd01df86e874d38ed83469a3f7 Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Fri, 17 Mar 2023 17:52:24 +0800
Subject: [PATCH] Disable React Fast Refresh completely in webpack when running
 start command

---
 plugins/woocommerce-admin/package.json      |  2 +-
 plugins/woocommerce-admin/webpack.config.js | 37 ++++++++++++---------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json
index 72f6d43a919..8a500e53f63 100644
--- a/plugins/woocommerce-admin/package.json
+++ b/plugins/woocommerce-admin/package.json
@@ -38,7 +38,7 @@
 		"run:packages": "pnpm run --parallel --filter='../../packages/js/**'",
 		"prestart": "pnpm packages:build && cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config",
 		"start": "concurrently \"cross-env WC_ADMIN_PHASE=development webpack --watch\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"",
-		"start:hot": "pnpm prestart && concurrently \"cross-env WC_ADMIN_PHASE=development webpack serve\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"",
+		"start:hot": "pnpm prestart && concurrently \"cross-env HOT=true WC_ADMIN_PHASE=development webpack serve\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"",
 		"test-staged": "pnpm run test:client --bail --findRelatedTests",
 		"test:client": "jest --config client/jest.config.js",
 		"test:debug": "node --inspect-brk ./node_modules/.bin/jest --config client/jest.config.js --watch --runInBand --no-cache",
diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js
index 949227462c2..54a6afebd25 100644
--- a/plugins/woocommerce-admin/webpack.config.js
+++ b/plugins/woocommerce-admin/webpack.config.js
@@ -22,6 +22,7 @@ const WooCommerceDependencyExtractionWebpackPlugin = require( '../../packages/js
 
 const NODE_ENV = process.env.NODE_ENV || 'development';
 const WC_ADMIN_PHASE = process.env.WC_ADMIN_PHASE || 'development';
+const isHot = Boolean( process.env.HOT );
 const isProduction = NODE_ENV === 'production';
 
 const wcAdminPackages = [
@@ -134,6 +135,7 @@ const webpackConfig = {
 						plugins: [
 							'@babel/plugin-proposal-class-properties',
 							! isProduction &&
+								isHot &&
 								require.resolve( 'react-refresh/babel' ),
 						].filter( Boolean ),
 					},
@@ -190,7 +192,7 @@ const webpackConfig = {
 			} ) ),
 		} ),
 		// React Fast Refresh.
-		! isProduction && new ReactRefreshWebpackPlugin(),
+		! isProduction && isHot && new ReactRefreshWebpackPlugin(),
 
 		// We reuse this Webpack setup for Storybook, where we need to disable dependency extraction.
 		! process.env.STORYBOOK &&
@@ -228,23 +230,26 @@ const webpackConfig = {
 if ( ! isProduction || WC_ADMIN_PHASE === 'development' ) {
 	// Set default sourcemap mode if it wasn't set by WP_DEVTOOL.
 	webpackConfig.devtool = webpackConfig.devtool || 'source-map';
-	// Add dev server config
-	// Copied from https://github.com/WordPress/gutenberg/blob/05bea6dd5c6198b0287c41a401d36a06b48831eb/packages/scripts/config/webpack.config.js#L312-L326
-	webpackConfig.devServer = {
-		devMiddleware: {
-			writeToDisk: true,
-		},
-		allowedHosts: 'auto',
-		host: 'localhost',
-		port: 8887,
-		proxy: {
-			'/build': {
-				pathRewrite: {
-					'^/build': '',
+
+	if ( isHot ) {
+		// Add dev server config
+		// Copied from https://github.com/WordPress/gutenberg/blob/05bea6dd5c6198b0287c41a401d36a06b48831eb/packages/scripts/config/webpack.config.js#L312-L326
+		webpackConfig.devServer = {
+			devMiddleware: {
+				writeToDisk: true,
+			},
+			allowedHosts: 'auto',
+			host: 'localhost',
+			port: 8887,
+			proxy: {
+				'/build': {
+					pathRewrite: {
+						'^/build': '',
+					},
 				},
 			},
-		},
-	};
+		};
+	}
 }
 
 module.exports = webpackConfig;