update(other): 🧩 update webpack development config

fix issue react-refresh run wrong, by removing splitchunks components

Author: anhchangvt1994

config/webpack.development.config.js

@@ -39,7 +39,6 @@ const WebpackDevelopmentConfiguration = async () => {
 		output: {
 			publicPath: '/',
 			module: true,
-			// library: { type: 'module' },
 			environment: {
 				dynamicImport: true,
 			},
@@ -64,7 +63,10 @@ const WebpackDevelopmentConfiguration = async () => {
 			hot: true,
 			liveReload: false,
 			host: process.env.PROJECT_IPV4_HOST,
-			client: { overlay: false }, // NOTE - Use overlay of react refresh plugin
+			client: {
+				overlay: false,
+				logging: 'warn', // Want to set this to 'warn' or 'error'
+			}, // NOTE - Use overlay of react refresh plugin
 			historyApiFallback: true,
 			devMiddleware: {
 				publicPath: '/',
@@ -99,6 +101,12 @@ const WebpackDevelopmentConfiguration = async () => {
 									decorators: false,
 									dynamicImport: true,
 								},
+								transform: {
+									react: {
+										development: true,
+										refresh: true,
+									},
+								},
 								target: 'esnext',
 							},
 						},
@@ -139,7 +147,7 @@ const WebpackDevelopmentConfiguration = async () => {
 				// excludeChunks: ["socket.io-client"],
 			}),
 			RecompileLoadingScreenInitial,
-			new ReactRefreshPlugin(),
+			new ReactRefreshPlugin({ esModule: true, overlay: true }),
 			new WebpackCustomizeDefinePlugin({
 				'import.meta.env': WebpackCustomizeDefinePlugin.RuntimeUpdateValue(
 					() => {
@@ -230,13 +238,6 @@ const WebpackDevelopmentConfiguration = async () => {
 						reuseExistingChunk: true,
 						enforce: true,
 					},
-					components: {
-						chunks: 'async',
-						test: /[\\/]components[\\/]/,
-						name: 'components',
-						reuseExistingChunk: true,
-						enforce: true,
-					},
 				}, // cacheGroups
 			},
 		},

package.json

@@ -64,7 +64,6 @@
 		"prettier": "^2.7.1",
 		"purgecss-webpack-plugin": "^5.0.0",
 		"quicktype-core": "^6.0.62",
-		"react-refresh": "^0.14.0",
 		"socket.io": "^4.5.3",
 		"swc-loader": "^0.2.3",
 		"tailwindcss": "^3.2.3",
@@ -78,7 +77,7 @@
 		"polished": "^4.2.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-router-dom": "^6.6.1",
+		"react-router-dom": "^6.8.0",
 		"styled-components": "^5.3.6"
 	},
 	"eslintConfig": {