Fixing Preact HMR in webpack

Author: StopNGo

_webpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-proto",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "React TypeScript Boilerplate",
   "author": "Max L Stop&Go",
   "license": "ISC",
@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
+    "@prefresh/webpack": "4.0.1",
     "@svgr/webpack": "8.1.0",
     "@swc/core": "1.7.26",
     "@testing-library/jest-dom": "6.5.0",
@@ -41,6 +42,7 @@
     "@types/loadable__component": "5.13.9",
     "@types/loadable__server": "5.12.11",
     "@types/node": "22.7.5",
+    "@types/prefresh__webpack": "3.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.0",
     "@types/react-helmet": "6.1.11",

_webpack/webpack/client.config.ts

@@ -8,6 +8,7 @@ import {
 } from 'webpack'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
+import PreactRefreshPlugin from '@prefresh/webpack'
 import LoadablePlugin from '@loadable/webpack-plugin'
 import CssoWebpackPlugin from 'csso-webpack-plugin'
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
@@ -16,7 +17,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin'
 import CopyPlugin from 'copy-webpack-plugin'
 import 'webpack-dev-server'
 
-import { ALIAS, DEV_SERVER_PORT, DIST_DIR, IS_DEV, IS_LAZY_COMPILATION, SRC_DIR } from './constants'
+import { ALIAS, DEV_SERVER_PORT, DIST_DIR, IS_DEV, IS_LAZY_COMPILATION, SRC_DIR, IS_PREACT } from './constants'
 import * as Loaders from './loaders'
 
 const withReport = Boolean(process.env.npm_config_withReport)
@@ -57,7 +58,10 @@ const plugins: WebpackPluginInstance[] = [
     writeToDisk: true
   }) as { apply: () => void },
   ...(IS_DEV
-    ? [new HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin()]
+    ? [
+      new HotModuleReplacementPlugin(),
+      IS_PREACT ? new PreactRefreshPlugin() : new ReactRefreshWebpackPlugin()
+      ]
     : [
         new CssoWebpackPlugin(),
         new BundleAnalyzerPlugin({

_webpack/webpack/constants.ts

@@ -2,7 +2,7 @@ import path from 'path'
 
 const IS_DEV: boolean = String(process.env.NODE_ENV).trim() === 'development'
 
-const IS_PREACT: boolean = true
+const IS_PREACT: boolean = false
 const IS_SWC: boolean = true
 const IS_LAZY_COMPILATION = false
 const DEV_SERVER_PORT: number = 8080

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-proto",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "React TypeScript Boilerplate",
   "author": "Max L Stop&Go",
   "license": "ISC",