From a6e3398e0635a0dd01df86e874d38ed83469a3f7 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Fri, 17 Mar 2023 17:52:24 +0800 Subject: [PATCH 1/3] 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; From f5b80b84cf06bf590f937af9e43f8c62aa059bc0 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Fri, 17 Mar 2023 17:53:14 +0800 Subject: [PATCH 2/3] Add changelog --- plugins/woocommerce/changelog/dev-update-webpack-config | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 plugins/woocommerce/changelog/dev-update-webpack-config diff --git a/plugins/woocommerce/changelog/dev-update-webpack-config b/plugins/woocommerce/changelog/dev-update-webpack-config new file mode 100644 index 00000000000..5741df584c5 --- /dev/null +++ b/plugins/woocommerce/changelog/dev-update-webpack-config @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Update WCA webpack config and package.json to use start command when script debug is false + + From cbafbd53c4442be628d9b92417bfca1e46085c8e Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Fri, 17 Mar 2023 19:44:09 +0800 Subject: [PATCH 3/3] Update plugins/woocommerce/changelog/dev-update-webpack-config Co-authored-by: Gan Eng Chin --- plugins/woocommerce/changelog/dev-update-webpack-config | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce/changelog/dev-update-webpack-config b/plugins/woocommerce/changelog/dev-update-webpack-config index 5741df584c5..d2f975eba32 100644 --- a/plugins/woocommerce/changelog/dev-update-webpack-config +++ b/plugins/woocommerce/changelog/dev-update-webpack-config @@ -1,5 +1,5 @@ Significance: patch Type: dev -Comment: Update WCA webpack config and package.json to use start command when script debug is false +Comment: Use React Fast Refresh for WooCommerce Admin "start:hot" command only; fix empty page issue with "start" command when SCRIPT_DEBUG is set to false.