feat(gatsby-plugin-preact): enable preact in development (#22441)

Co-authored-by: Ward Peeters <ward@coding-tech.com>

packages/gatsby-plugin-preact/README.md

@@ -18,9 +18,3 @@ React.
 // In your gatsby-config.js
 plugins: [`gatsby-plugin-preact`]
 ```
-
-## Usage in a development environment
-
-Gatsby development server currently has a hardcoded dependency on React-dom, therefore this plugin does not enable Preact in development.
-
-While Preact is designed to be a drop-in replacement, you should check that your production build works as expected before putting it live.

packages/gatsby-plugin-preact/package.json

@@ -25,7 +25,7 @@
   "main": "index.js",
   "peerDependencies": {
     "gatsby": "^2.0.0",
-    "preact": "^10.0.0"
+    "preact": "^10.3.4"
   },
   "repository": {
     "type": "git",

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

@@ -17,12 +17,4 @@ describe(`gatsby-plugin-preact`, () => {
       },
     })
   })
-
-  it(`does not invoke setWebpackConfig when stage is develop`, () => {
-    const actions = { setWebpackConfig: jest.fn() }
-
-    onCreateWebpackConfig({ stage: `develop`, actions })
-
-    expect(actions.setWebpackConfig).not.toHaveBeenCalled()
-  })
 })

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

@@ -1,6 +1,6 @@
-// TODO enable preact/debug again when preact devtools is fixed.
-// exports.onClientEntry = () => {
-//   if (process.env.NODE_ENV !== `production`) {
-//     require(`preact/debug`)
-//   }
-// }
+exports.onClientEntry = () => {
+  if (process.env.NODE_ENV !== `production`) {
+    console.log(`[HMR] disabled: preact is not compatible with RHL`)
+    require(`preact/debug`)
+  }
+}

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

@@ -1,16 +1,22 @@
-exports.onCreateWebpackConfig = ({ stage, actions }) => {
-  // Requiring the server version of React-dom is hardcoded right now
-  // in the development server. So we'll just avoid loading Preact there
-  // for now.
-  if (stage !== `develop`) {
-    actions.setWebpackConfig({
-      resolve: {
-        alias: {
-          react: `preact/compat`,
-          "react-dom": `preact/compat`,
-          "react-dom/server": `preact/compat`,
-        },
+exports.onPreInit = () => {
+  // Setting this variable replaces react-hot-loader with
+  // [fast-refresh](https://reactnative.dev/docs/next/fast-refresh)
+  // and resolves conflicts with running Preact in development.
+  process.env.GATSBY_HOT_LOADER = `fast-refresh`
+}
+
+exports.onCreateWebpackConfig = ({ actions }) => {
+  // React-dom is hardcoded as part of react-hot-loader
+  // in the development server. So we either avoid Preact
+  // during development or switch to fast-refresh and loose
+  // hot reloading capabilities.
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        react: `preact/compat`,
+        "react-dom": `preact/compat`,
+        "react-dom/server": `preact/compat`,
       },
-    })
-  }
+    },
+  })
 }