Alternate bundler: correctly inject react refresh loader

package.json

@@ -109,8 +109,8 @@
     "@next/third-parties": "workspace:*",
     "@opentelemetry/api": "1.4.1",
     "@picocss/pico": "1.5.10",
-    "@rspack/core": "1.3.0",
-    "@rspack/plugin-react-refresh": "1.0.1",
+    "@rspack/core": "1.3.2",
+    "@rspack/plugin-react-refresh": "1.1.0",
     "@svgr/webpack": "5.5.0",
     "@swc/cli": "0.1.55",
     "@swc/core": "1.9.3",

packages/next-rspack/package.json

@@ -7,8 +7,8 @@
   },
   "types": "index.d.ts",
   "dependencies": {
-    "@rspack/core": "1.3.0",
-    "@rspack/plugin-react-refresh": "1.0.1",
+    "@rspack/core": "1.3.2",
+    "@rspack/plugin-react-refresh": "1.1.0",
     "react-refresh": "0.12.0"
   }
 }

packages/next/src/build/webpack-config.ts

@@ -172,11 +172,17 @@ let loggedIgnoredCompilerOptions = false
 const reactRefreshLoaderName =
   'next/dist/compiled/@next/react-refresh-utils/dist/loader'
 
+function getReactRefreshLoader() {
+  return process.env.NEXT_RSPACK
+    ? getRspackReactRefresh().loader
+    : require.resolve(reactRefreshLoaderName)
+}
+
 export function attachReactRefresh(
   webpackConfig: webpack.Configuration,
   targetLoader: webpack.RuleSetUseItem
 ) {
-  const reactRefreshLoader = require.resolve(reactRefreshLoaderName)
+  const reactRefreshLoader = getReactRefreshLoader()
   webpackConfig.module?.rules?.forEach((rule) => {
     if (rule && typeof rule === 'object' && 'use' in rule) {
       const curr = rule.use
@@ -603,11 +609,7 @@ export default async function getBaseWebpackConfig(
     babelLoader,
   ].filter(Boolean)
 
-  // Rspack will inject their own React Refresh loader in @rspack/plugin-react-refresh
-  const reactRefreshLoaders =
-    !isRspack && dev && isClient
-      ? [require.resolve(reactRefreshLoaderName)]
-      : []
+  const reactRefreshLoaders = dev && isClient ? [getReactRefreshLoader()] : []
 
   // client components layers: SSR or browser
   const createClientLayerLoader = ({
@@ -1900,7 +1902,7 @@ export default async function getBaseWebpackConfig(
         isClient &&
         (isRspack
           ? // eslint-disable-next-line
-            new (getRspackReactRefresh() as any)()
+            new (getRspackReactRefresh() as any)({ injectLoader: false })
           : new ReactRefreshWebpackPlugin(webpack)),
       // Makes sure `Buffer` and `process` are polyfilled in client and flight bundles (same behavior as webpack 4)
       (isClient || isEdgeServer) &&
@@ -2616,8 +2618,7 @@ export default async function getBaseWebpackConfig(
   }
 
   // Inject missing React Refresh loaders so that development mode is fast:
-  // Rspack will inject their own React Refresh loader in @rspack/plugin-react-refresh
-  if (!isRspack && dev && isClient) {
+  if (dev && isClient) {
     attachReactRefresh(webpackConfig, defaultLoaders.babel)
   }