[Fast Refresh] Improve responsiveness on Windows (#12909)

packages/next/build/webpack/config/blocks/base.ts

@@ -11,24 +11,28 @@ export const base = curry(function base(
   config.target = ctx.isServer ? 'node' : 'web'
 
   // https://webpack.js.org/configuration/devtool/#development
-  config.devtool = ctx.isDevelopment
-    ? ctx.isReactRefreshEnabled
-      ? ctx.isServer
-        ? // Non-eval based source maps are very slow to rebuild, so we only
-          // enable them for the server. Unfortunately, eval source maps are
-          // not supported by Node.js.
-          'inline-source-map'
-        : // `eval-source-map` provides full-fidelity source maps for the
-          // original source, including columns and original variable names.
-          // This is desirable so the in-browser debugger can correctly pause
-          // and show scoped variables with their original names.
-          'eval-source-map'
-      : // `cheap-module-source-map` is the old preferred format that was
-        // required for `react-error-overlay`.
-        'cheap-module-source-map'
-    : ctx.isProduction
-    ? false
-    : false
+  if (ctx.isDevelopment) {
+    if (ctx.isReactRefreshEnabled) {
+      if (ctx.isServer || process.platform === 'win32') {
+        // Non-eval based source maps are slow to rebuild, so we only enable
+        // them for the server and Windows. Unfortunately, eval source maps
+        // are not supported by Node.js, and are slow on Windows.
+        config.devtool = 'inline-source-map'
+      } else {
+        // `eval-source-map` provides full-fidelity source maps for the
+        // original source, including columns and original variable names.
+        // This is desirable so the in-browser debugger can correctly pause
+        // and show scoped variables with their original names.
+        config.devtool = 'eval-source-map'
+      }
+    } else {
+      // `cheap-module-source-map` is the old preferred format that was
+      // required for `react-error-overlay`.
+      config.devtool = 'cheap-module-source-map'
+    }
+  } else {
+    config.devtool = false
+  }
 
   if (!config.module) {
     config.module = { rules: [] }

packages/react-dev-overlay/src/client.ts

-import { parse as parseStack } from 'stacktrace-parser'
 import * as Bus from './internal/bus'
+import { parseStack } from './internal/helpers/parseStack'
 
 let isRegistered = false
 let stackTraceLimit: number | undefined = undefined

packages/react-dev-overlay/src/internal/helpers/getRawSourceMap.ts

@@ -4,7 +4,7 @@ import { getSourceMapUrl } from './getSourceMapUrl'
 
 export function getRawSourceMap(fileContents: string): RawSourceMap | null {
   const sourceUrl = getSourceMapUrl(fileContents)
-  if (sourceUrl == null) {
+  if (!sourceUrl?.startsWith('data:')) {
     return null
   }
 

packages/react-dev-overlay/src/internal/helpers/parseStack.ts

+import { parse, StackFrame } from 'stacktrace-parser'
+
+const regexNextStatic = /\/_next(\/static\/.+)/g
+
+export function parseStack(stack: string): StackFrame[] {
+  const frames = parse(stack)
+  return frames.map(frame => {
+    try {
+      const url = new URL(frame.file)
+      const res = regexNextStatic.exec(url.pathname)
+      if (res) {
+        const distDir = process.env.__NEXT_DIST_DIR
+          ?.replace(/\\/g, '/')
+          ?.replace(/\/$/, '')
+        if (distDir) {
+          frame.file = 'file://' + distDir.concat(res.pop())
+        }
+      }
+    } catch {}
+    return frame
+  })
+}

test/acceptance/ReactRefreshLogBox.test.js

@@ -101,17 +101,31 @@ test('logbox: can recover from a event handler error', async () => {
   ).toBe('1')
 
   expect(await session.hasRedbox(true)).toBe(true)
-  expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
-    "index.js (8:16) @ eval
-
-       6 | const increment = useCallback(() => {
-       7 |   setCount(c => c + 1)
-    >  8 |   throw new Error('oops')
-         |        ^
-       9 | }, [setCount])
-      10 | return (
-      11 |   <main>"
-  `)
+  if (process.platform === 'win32') {
+    expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
+      "index.js (8:16) @ <unknown>
+
+         6 | const increment = useCallback(() => {
+         7 |   setCount(c => c + 1)
+      >  8 |   throw new Error('oops')
+           |        ^
+         9 | }, [setCount])
+        10 | return (
+        11 |   <main>"
+    `)
+  } else {
+    expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
+      "index.js (8:16) @ eval
+
+         6 | const increment = useCallback(() => {
+         7 |   setCount(c => c + 1)
+      >  8 |   throw new Error('oops')
+           |        ^
+         9 | }, [setCount])
+        10 | return (
+        11 |   <main>"
+    `)
+  }
 
   await session.patch(
     'index.js',
@@ -466,17 +480,31 @@ test('syntax > runtime error', async () => {
 
   await new Promise(resolve => setTimeout(resolve, 1000))
   expect(await session.hasRedbox(true)).toBe(true)
-  expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
-    "index.js (6:14) @ eval
-
-      4 | setInterval(() => {
-      5 |   i++
-    > 6 |   throw Error('no ' + i)
-        |        ^
-      7 | }, 1000)
-      8 | export default function FunctionNamed() {
-      9 |   return <div />"
-  `)
+  if (process.platform === 'win32') {
+    expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
+      "index.js (6:14) @ <unknown>
+
+        4 | setInterval(() => {
+        5 |   i++
+      > 6 |   throw Error('no ' + i)
+          |        ^
+        7 | }, 1000)
+        8 | export default function FunctionNamed() {
+        9 |   return <div />"
+    `)
+  } else {
+    expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
+      "index.js (6:14) @ eval
+
+        4 | setInterval(() => {
+        5 |   i++
+      > 6 |   throw Error('no ' + i)
+          |        ^
+        7 | }, 1000)
+        8 | export default function FunctionNamed() {
+        9 |   return <div />"
+    `)
+  }
 
   // Make a syntax error.
   await session.patch(