fix(Rspack): resolve HMR unresponsiveness or unexpected full reload & update dev snapshot

package.json

@@ -124,7 +124,6 @@
     "@opentelemetry/api": "1.4.1",
     "@picocss/pico": "1.5.10",
     "@rspack/core": "1.5.0",
-    "@rspack/plugin-react-refresh": "1.2.0",
     "@slack/web-api": "7.9.1",
     "@swc/cli": "0.1.55",
     "@swc/core": "1.11.24",

packages/next-rspack/package.json

@@ -7,8 +7,6 @@
   },
   "types": "index.d.ts",
   "dependencies": {
-    "@rspack/core": "1.5.0",
-    "@rspack/plugin-react-refresh": "1.2.0",
-    "react-refresh": "0.12.0"
+    "@rspack/core": "1.5.0"
   }
 }

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

@@ -94,7 +94,7 @@ import {
   NEXT_PROJECT_ROOT,
   NEXT_PROJECT_ROOT_DIST_CLIENT,
 } from './next-dir-paths'
-import { getRspackCore, getRspackReactRefresh } from '../shared/lib/get-rspack'
+import { getRspackCore } from '../shared/lib/get-rspack'
 import { RspackProfilingPlugin } from './webpack/plugins/rspack-profiling-plugin'
 import getWebpackBundler from '../shared/lib/get-webpack-bundler'
 import type { NextBuildContext } from './build-context'
@@ -178,7 +178,7 @@ const reactRefreshLoaderName =
 
 function getReactRefreshLoader() {
   return process.env.NEXT_RSPACK
-    ? getRspackReactRefresh().loader
+    ? 'builtin:react-refresh-loader'
     : require.resolve(reactRefreshLoaderName)
 }
 
@@ -698,7 +698,9 @@ export default async function getBaseWebpackConfig(
   ]
 
   const reactRefreshEntry = isRspack
-    ? getRspackReactRefresh().entry
+    ? require.resolve(
+        `next/dist/compiled/@next/react-refresh-utils/dist/rspack-runtime`
+      )
     : require.resolve(
         `next/dist/compiled/@next/react-refresh-utils/dist/runtime`
       )
@@ -1990,11 +1992,7 @@ export default async function getBaseWebpackConfig(
         isClient &&
         (isRspack
           ? // eslint-disable-next-line
-            new (getRspackReactRefresh() as any)({
-              injectLoader: false,
-              injectEntry: false,
-              overlay: false,
-            })
+            new (require('next/dist/compiled/@next/react-refresh-utils/dist/ReactRefreshRspackPlugin').default)()
           : new ReactRefreshWebpackPlugin(webpack)),
       // Makes sure `Buffer` and `process` are polyfilled in client and flight bundles (same behavior as webpack 4)
       (isClient || isEdgeServer) &&

packages/next/src/build/webpack/loaders/next-font-loader/index.ts

@@ -35,6 +35,12 @@ export default async function nextFontLoader(this: any) {
         `${bold('Cannot')} be used within ${cyan('pages/_document.js')}.`
       )
       err.name = 'NextFontError'
+      if (process.env.NEXT_RSPACK) {
+        // Rspack uses miette for error formatting, which automatically includes stack
+        // traces in the error message. To avoid showing redundant stack information
+        // in the final error output, we clear the stack property.
+        err.stack = undefined
+      }
       callback(err)
       return
     }

packages/next/src/build/webpack/loaders/next-invalid-import-error-loader.ts

@@ -7,11 +7,9 @@ const nextInvalidImportErrorLoader: webpack.LoaderDefinitionFunction<InvalidImpo
     const { message } = this.getOptions()
     const error = new Error(message)
     if (process.env.NEXT_RSPACK) {
-      /**
-       * Rspack uses miette for error formatting, which automatically includes stack
-       * traces in the error message. To avoid showing redundant stack information
-       * in the final error output, we clear the stack property.
-       */
+      // Rspack uses miette for error formatting, which automatically includes stack
+      // traces in the error message. To avoid showing redundant stack information
+      // in the final error output, we clear the stack property.
       error.stack = undefined
     }
     throw error

packages/next/src/shared/lib/get-rspack.ts

@@ -17,31 +17,6 @@ export function getRspackCore() {
   }
 }
 
-export function getRspackReactRefresh() {
-  warnRspack()
-  try {
-    const paths = [require.resolve('next-rspack')]
-    // eslint-disable-next-line import/no-extraneous-dependencies
-    const plugin = require(
-      require.resolve('@rspack/plugin-react-refresh', { paths })
-    )
-    const entry = require.resolve(
-      '@rspack/plugin-react-refresh/react-refresh-entry',
-      { paths }
-    )
-    plugin.entry = entry
-    return plugin
-  } catch (e) {
-    if (e instanceof Error && 'code' in e && e.code === 'MODULE_NOT_FOUND') {
-      throw new Error(
-        '@rspack/plugin-react-refresh is not available. Please make sure `next-rspack` is correctly installed.'
-      )
-    }
-
-    throw e
-  }
-}
-
 function warnRspack() {
   if (process.env.__NEXT_TEST_MODE) {
     return

packages/react-refresh-utils/ReactRefreshRspackPlugin.ts

@@ -0,0 +1,24 @@
+import type { Compiler } from 'webpack'
+
+const PLUGIN_NAME = 'ReactRefreshRspackPlugin'
+
+class ReactRefreshRspackPlugin {
+  static loader = 'builtin:react-refresh-loader'
+
+  apply(compiler: Compiler) {
+    new compiler.webpack.ProvidePlugin({
+      $ReactRefreshRuntime$: require.resolve('./internal/RspackReactRefresh'),
+    }).apply(compiler)
+
+    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+      compilation.hooks.additionalTreeRuntimeRequirements.tap(
+        PLUGIN_NAME,
+        (_, runtimeRequirements) => {
+          runtimeRequirements.add(compiler.webpack.RuntimeGlobals.moduleCache)
+        }
+      )
+    })
+  }
+}
+
+export default ReactRefreshRspackPlugin

packages/react-refresh-utils/internal/RspackReactRefresh.ts

@@ -0,0 +1,96 @@
+import RefreshHelpers from './helpers'
+
+declare const __webpack_require__: {
+  c: Record<string | number, { exports: unknown | (() => Promise<unknown>) }>
+}
+
+// Extracts exports from a webpack module object.
+function getModuleExports(moduleId: string) {
+  if (typeof moduleId === 'undefined') {
+    // `moduleId` is unavailable, which indicates that this module is not in the cache,
+    // which means we won't be able to capture any exports,
+    // and thus they cannot be refreshed safely.
+    // These are likely runtime or dynamically generated modules.
+    return {}
+  }
+
+  var maybeModule = __webpack_require__.c[moduleId]
+  if (typeof maybeModule === 'undefined') {
+    // `moduleId` is available but the module in cache is unavailable,
+    // which indicates the module is somehow corrupted (e.g. broken Webpack `module` globals).
+    // We will warn the user (as this is likely a mistake) and assume they cannot be refreshed.
+    console.warn(
+      '[React Refresh] Failed to get exports for module: ' + moduleId + '.'
+    )
+    return {}
+  }
+
+  var exportsOrPromise = maybeModule.exports
+  if (typeof Promise !== 'undefined' && exportsOrPromise instanceof Promise) {
+    return exportsOrPromise.then(function (exports) {
+      return exports
+    })
+  }
+  return exportsOrPromise
+}
+
+function executeRuntime(moduleExports, moduleId, webpackHot) {
+  RefreshHelpers.registerExportsForReactRefresh(moduleExports, moduleId)
+
+  if (webpackHot) {
+    var isHotUpdate = !!webpackHot.data
+    var prevSignature: unknown[] | null = webpackHot.data?.prevSignature ?? null
+
+    if (RefreshHelpers.isReactRefreshBoundary(moduleExports)) {
+      webpackHot.dispose(
+        // Save the previous exports signature on update so we can compare the boundary
+        // signatures. We avoid saving exports themselves since it causes memory leaks (https://github.com/vercel/next.js/pull/53797)
+        function hotDisposeCallback(data) {
+          data.prevSignature =
+            RefreshHelpers.getRefreshBoundarySignature(moduleExports)
+        }
+      )
+      webpackHot.accept()
+
+      // This field is set when the previous version of this module was a
+      // Refresh Boundary, letting us know we need to check for invalidation or
+      // enqueue an update.
+      if (prevSignature !== null) {
+        if (isHotUpdate) {
+          if (
+            RefreshHelpers.shouldInvalidateReactRefreshBoundary(
+              prevSignature,
+              RefreshHelpers.getRefreshBoundarySignature(moduleExports)
+            )
+          ) {
+            webpackHot.invalidate()
+          } else {
+            RefreshHelpers.scheduleUpdate()
+          }
+        }
+      }
+    } else {
+      if (isHotUpdate && prevSignature !== null) {
+        webpackHot.invalidate()
+      }
+    }
+  }
+}
+
+// Port from https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/loader/utils/getRefreshModuleRuntime.js#L29
+export function refresh(moduleId, webpackHot) {
+  const currentExports = getModuleExports(moduleId)
+  const fn = (exports) => {
+    executeRuntime(exports, moduleId, webpackHot)
+  }
+  if (typeof Promise !== 'undefined' && currentExports instanceof Promise) {
+    currentExports.then(fn)
+  } else {
+    fn(currentExports)
+  }
+}
+
+export {
+  register,
+  createSignatureFunctionForTransform,
+} from 'react-refresh/runtime'

packages/react-refresh-utils/rspack-runtime.ts

@@ -0,0 +1,20 @@
+import RefreshRuntime from 'react-refresh/runtime'
+import type { RefreshRuntimeGlobals } from './runtime'
+
+declare const self: Window & RefreshRuntimeGlobals
+
+if (typeof self !== 'undefined') {
+  var $RefreshInjected$ = '__reactRefreshInjected'
+
+  // Only inject the runtime if it hasn't been injected
+  if (!self[$RefreshInjected$]) {
+    RefreshRuntime.injectIntoGlobalHook(self)
+
+    // Empty implementation to avoid "ReferenceError: variable is not defined" in module which didn't pass builtin:react-refresh-loader
+    self.$RefreshSig$ = () => (type) => type
+    self.$RefreshReg$ = () => {}
+
+    // Mark the runtime as injected to prevent double-injection
+    self[$RefreshInjected$] = true
+  }
+}

test/development/acceptance-app/ReactRefreshLogBox.test.ts

@@ -104,6 +104,27 @@ describe('ReactRefreshLogBox app', () => {
          ],
        }
       `)
+    } else if (isRspack) {
+      await expect(browser).toDisplayRedbox(`
+       {
+         "description": "no",
+         "environmentLabel": null,
+         "label": "Runtime Error",
+         "source": "index.js (3:7) @ eval
+       > 3 | throw new Error('no')
+           |       ^",
+         "stack": [
+           "eval index.js (3:7)",
+           "<FIXME-next-dist-dir>",
+           "<FIXME-next-dist-dir>",
+           "<FIXME-next-dist-dir>",
+           "eval ./app/page.js",
+           "<FIXME-next-dist-dir>",
+           "<FIXME-next-dist-dir>",
+           "<FIXME-next-dist-dir>",
+         ],
+       }
+      `)
     } else {
       await expect(browser).toDisplayRedbox(`
        [