Alternate bundler: fix react refresh and adjust sourcemap

package.json

@@ -110,7 +110,7 @@
     "@opentelemetry/api": "1.4.1",
     "@picocss/pico": "1.5.10",
     "@rspack/core": "1.3.2",
-    "@rspack/plugin-react-refresh": "1.1.0",
+    "@rspack/plugin-react-refresh": "1.2.0",
     "@svgr/webpack": "5.5.0",
     "@swc/cli": "0.1.55",
     "@swc/core": "1.9.3",

packages/next-rspack/package.json

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

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

@@ -671,15 +671,19 @@ export default async function getBaseWebpackConfig(
     '...',
   ]
 
+  const reactRefreshEntry = isRspack
+    ? getRspackReactRefresh().entry
+    : require.resolve(
+        `next/dist/compiled/@next/react-refresh-utils/dist/runtime`
+      )
+
   const clientEntries = isClient
     ? ({
         // Backwards compatibility
         'main.js': [],
         ...(dev
           ? {
-              [CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH]: require.resolve(
-                `next/dist/compiled/@next/react-refresh-utils/dist/runtime`
-              ),
+              [CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH]: reactRefreshEntry,
               [CLIENT_STATIC_FILES_RUNTIME_AMP]:
                 `./` +
                 path
@@ -705,9 +709,7 @@ export default async function getBaseWebpackConfig(
           ? {
               [CLIENT_STATIC_FILES_RUNTIME_MAIN_APP]: dev
                 ? [
-                    require.resolve(
-                      `next/dist/compiled/@next/react-refresh-utils/dist/runtime`
-                    ),
+                    reactRefreshEntry,
                     `./` +
                       path
                         .relative(
@@ -1902,7 +1904,11 @@ export default async function getBaseWebpackConfig(
         isClient &&
         (isRspack
           ? // eslint-disable-next-line
-            new (getRspackReactRefresh() as any)({ injectLoader: false })
+            new (getRspackReactRefresh() as any)({
+              injectLoader: false,
+              injectEntry: false,
+              overlay: false,
+            })
           : 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/config/blocks/base.ts

@@ -34,8 +34,6 @@ export const base = curry(function base(
   if (ctx.isDevelopment) {
     if (process.env.__NEXT_TEST_MODE && !process.env.__NEXT_TEST_WITH_DEVTOOL) {
       config.devtool = false
-    } else if (process.env.NEXT_RSPACK) {
-      config.devtool = 'source-map'
     } else {
       // `eval-source-map` provides full-fidelity source maps for the
       // original source, including columns and original variable names.
@@ -51,14 +49,6 @@ export const base = curry(function base(
       (ctx.productionBrowserSourceMaps && ctx.isClient)
     ) {
       config.devtool = 'source-map'
-      config.plugins ??= []
-      config.plugins.push(
-        new DevToolsIgnorePlugin({
-          // TODO: eval-source-map has different module paths than source-map.
-          // We're currently not actually ignore listing anything.
-          shouldIgnorePath,
-        })
-      )
     } else {
       config.devtool = false
     }
@@ -69,7 +59,7 @@ export const base = curry(function base(
   }
 
   config.plugins ??= []
-  if (config.devtool === 'source-map') {
+  if (config.devtool === 'source-map' && !process.env.NEXT_RSPACK) {
     config.plugins.push(
       new DevToolsIgnorePlugin({
         shouldIgnorePath,

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

@@ -20,7 +20,12 @@ export function getRspackReactRefresh() {
   gateCanary()
   try {
     // eslint-disable-next-line import/no-extraneous-dependencies
-    return require('@rspack/plugin-react-refresh')
+    const plugin = require('@rspack/plugin-react-refresh')
+    const entry = require.resolve(
+      '@rspack/plugin-react-refresh/react-refresh-entry'
+    )
+    plugin.entry = entry
+    return plugin
   } catch (e) {
     if (e instanceof Error && 'code' in e && e.code === 'MODULE_NOT_FOUND') {
       throw new Error(