fix(gatsby-plugin-preact): Adjust framework chunk overwrite (#37658)

Author: LekoArts

packages/gatsby-plugin-preact/src/__tests__/gatsby-node.js

@@ -1,8 +1,20 @@
-const path = require(`path`)
 const { onCreateWebpackConfig, onCreateBabelConfig } = require(`../gatsby-node`)
 const PreactRefreshPlugin = require(`@prefresh/webpack`)
 const ReactRefreshWebpackPlugin = require(`@pmmmwh/react-refresh-webpack-plugin`)
 
+const FRAMEWORK_BUNDLES_GATSBY = [
+  `react`,
+  `react-dom`,
+  `scheduler`,
+  `prop-types`,
+]
+
+const FRAMEWORK_BUNDLES_REGEX_GATSBY = new RegExp(
+  `(?<!node_modules.*)[\\\\/]node_modules[\\\\/](${FRAMEWORK_BUNDLES_GATSBY.join(
+    `|`
+  )})[\\\\/]`
+)
+
 describe(`gatsby-plugin-preact`, () => {
   it(`sets the correct webpack config in development`, () => {
     const getConfig = jest.fn(() => {
@@ -53,7 +65,6 @@ describe(`gatsby-plugin-preact`, () => {
   })
 
   it(`sets the correct webpack config in production`, () => {
-    const FRAMEWORK_BUNDLES = [`react`, `react-dom`, `scheduler`, `prop-types`]
     const getConfig = jest.fn(() => {
       return {
         optimization: {
@@ -65,14 +76,20 @@ describe(`gatsby-plugin-preact`, () => {
               framework: {
                 chunks: `all`,
                 name: `framework`,
-                // This regex ignores nested copies of framework libraries so they're bundled with their issuer.
-                test: new RegExp(
-                  `(?<!node_modules.*)[\\\\/]node_modules[\\\\/](${FRAMEWORK_BUNDLES.join(
-                    `|`
-                  )})[\\\\/]`
-                ),
+                // Mirrors what we have in gatsby/../webpack.config.js
+                test: module => {
+                  if (
+                    module?.rawRequest === `react-dom/server` ||
+                    module?.rawRequest?.includes(`/react-dom-server`)
+                  ) {
+                    return false
+                  }
+
+                  return FRAMEWORK_BUNDLES_REGEX_GATSBY.test(
+                    module.nameForCondition()
+                  )
+                },
                 priority: 40,
-                // Don't let webpack eliminate this chunk (prevents this chunk from becoming a part of the commons chunk)
                 enforce: true,
               },
             },
@@ -121,7 +138,7 @@ describe(`gatsby-plugin-preact`, () => {
                       "enforce": true,
                       "name": "framework",
                       "priority": 40,
-                      "test": [Function],
+                      "test": /\\(\\?<!node_modules\\.\\*\\)\\[\\\\\\\\/\\]node_modules\\[\\\\\\\\/\\]\\(preact\\|react\\|react-dom\\|scheduler\\|prop-types\\)\\[\\\\\\\\/\\]/,
                     },
                     "vendors": false,
                   },
@@ -141,7 +158,7 @@ describe(`gatsby-plugin-preact`, () => {
                       "enforce": true,
                       "name": "framework",
                       "priority": 40,
-                      "test": /\\(\\?<!node_modules\\.\\*\\)\\[\\\\\\\\/\\]node_modules\\[\\\\\\\\/\\]\\(react\\|react-dom\\|scheduler\\|prop-types\\)\\[\\\\\\\\/\\]/,
+                      "test": [Function],
                     },
                     "vendors": false,
                   },

packages/gatsby-plugin-preact/src/gatsby-node.js

@@ -1,5 +1,20 @@
 const PreactRefreshPlugin = require(`@prefresh/webpack`)
 
+const FRAMEWORK_BUNDLES_PREACT = [
+  `preact`,
+  `react`,
+  `react-dom`,
+  `scheduler`,
+  `prop-types`,
+]
+
+// This regex ignores nested copies of framework libraries so they're bundled with their issuer
+const FRAMEWORK_BUNDLES_REGEX_PREACT = new RegExp(
+  `(?<!node_modules.*)[\\\\/]node_modules[\\\\/](${FRAMEWORK_BUNDLES_PREACT.join(
+    `|`
+  )})[\\\\/]`
+)
+
 export function onCreateBabelConfig({ actions, stage }) {
   if (stage === `develop`) {
     // enable react-refresh babel plugin to enable hooks
@@ -45,15 +60,9 @@ export function onCreateWebpackConfig({ stage, actions, getConfig }) {
     if (
       webpackConfig?.optimization?.splitChunks?.cacheGroups?.framework?.test
     ) {
-      const frameworkRegex =
-        webpackConfig.optimization.splitChunks.cacheGroups.framework.test
-
       // replace react libs with preact
       webpackConfig.optimization.splitChunks.cacheGroups.framework.test =
-        module =>
-          /(?<!node_modules.*)[\\/]node_modules[\\/](preact)[\\/]/.test(
-            module.resource
-          ) || frameworkRegex.test(module.resource)
+        FRAMEWORK_BUNDLES_REGEX_PREACT
     }
   }
 

packages/gatsby/src/utils/webpack.config.js

@@ -635,6 +635,7 @@ module.exports = async (
         framework: {
           chunks: `all`,
           name: `framework`,
+          // Important: If you change something here, also update "gatsby-plugin-preact"
           test: module => {
             // Packages like gatsby-plugin-image might import from "react-dom/server". We don't want to include react-dom-server in the framework bundle.
             // A rawRequest might look like these: