^ react 18

Author: n8tz

etc/wp/webpack.config.comp.js

@@ -13,7 +13,8 @@ const lPack                   = require('layer-pack'),
       HtmlWebpackPlugin       = require('html-webpack-plugin'),
       BundleAnalyzerPlugin    = require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
       HardSourceWebpackPlugin = require('hard-source-webpack-plugin'),
-      autoprefixer            = require('autoprefixer');
+      autoprefixer            = require('autoprefixer'),
+      ReactRefreshPlugin      = require('@pmmmwh/react-refresh-webpack-plugin');
 
 
 const lpackCfg   = lPack.getConfig(),
@@ -82,6 +83,9 @@ module.exports = [
                                               })
                     ] || []
                 ),
+                ...(lpackCfg.vars.devServer && [
+                    new ReactRefreshPlugin({})
+                ] || []),
                 ...( fs.existsSync("./LICENCE.HEAD.MD") && [
                         new webpack.BannerPlugin(fs.readFileSync("./LICENCE.HEAD.MD").toString())
                     ] || []
@@ -124,6 +128,7 @@ module.exports = [
                                     '@babel/preset-react'
                                 ],
                                 plugins       : [
+                                    ...(lpackCfg.vars.devServer && [['react-refresh/babel', {}]] || []),
                                     ["@babel/plugin-proposal-decorators", { "legacy": true }],
                                     ['@babel/plugin-transform-class-properties', {
                                         //"loose": true

etc/wp/webpack.config.static.js

@@ -16,7 +16,8 @@ const lPack                = require('layer-pack'),
       BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
       MiniCssExtractPlugin = require('mini-css-extract-plugin'),
       devServerPort        = process.env.DEV_SERVER_PORT || 8080,
-      proxyTo              = process.env.API_PORT || 9701;
+      proxyTo              = process.env.API_PORT || 9701,
+      ReactRefreshPlugin      = require('@pmmmwh/react-refresh-webpack-plugin');
 
 module.exports = [
 	{
@@ -72,10 +73,7 @@ module.exports = [
 				".json",
 				".scss",
 				".css",
-			],
-			alias     : lpackCfg.vars.devServer && {
-				'react-dom': '@hot-loader/react-dom'
-			},
+			]
 		},
 
 		// Global build plugin & option
@@ -93,6 +91,9 @@ module.exports = [
 						                         //chunkFilename: '[id].css'
 					                         })
 				] || []),
+				...(lpackCfg.vars.devServer && [
+					new ReactRefreshPlugin({})
+				] || []),
 				...(fs.existsSync("./LICENCE.HEAD.MD") && [
 						new webpack.BannerPlugin(fs.readFileSync("./LICENCE.HEAD.MD").toString())
 					] || []
@@ -142,6 +143,7 @@ module.exports = [
 									'@babel/preset-react'
 								],
 								plugins       : [
+									...(lpackCfg.vars.devServer && [['react-refresh/babel', {}]] || []),
 									["@babel/plugin-proposal-decorators", { "legacy": true }],
 									['@babel/plugin-transform-class-properties', {
 										//"loose": true

etc/wp/webpack.config.www.js

@@ -209,7 +209,7 @@ module.exports = [
 									'@babel/preset-react'
 								],
 								plugins       : [
-									...(lpackCfg.vars.devServer && [['react-refresh/babel', {}]] || {}),
+									...(lpackCfg.vars.devServer && [['react-refresh/babel', {}]] || []),
 									["@babel/plugin-proposal-decorators", { "legacy": true }],
 									['@babel/plugin-transform-class-properties', {
 										//"loose": true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lpack-react",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "An inheritable App, lib or static App boilerplate with wp5, react, sass, hmr, SSR, express, helmet, etc",
   "license": "MIT",
   "author": "Nathan Braun <n8tz.js@gmail.com>",
@@ -46,7 +46,7 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "clean-webpack-plugin": "^3.0.0",
     "core-js": "^3.37.1",
-    "css-loader": "^5.2.7",
+        "css-loader": "^5.2.7",
     "cssnano": "^4.1.11",
     "file-loader": "^6.2.0",
     "hard-source-webpack-plugin": "^0.13.1",