Merge branch 'canary' into webpack/upgrade

examples/with-redux-toolkit/README.md

@@ -24,6 +24,6 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut
 
 ### TypeScript Setup (optional)
 
-If you haven't already added [TypeScript](https://www.typescriptlang.org/) to your project, follow the [steps in the Next.js documentation](https://nextjs.org/docs/basic-features/TypeScript). If you are new to TypeScript, go through the Next.js [learning lesson on TypeScript](https://nextjs.org/learn/excel/TypeScript).
+If you haven't already added [TypeScript](https://www.typescriptlang.org/) to your project, follow the [steps in the Next.js documentation](https://nextjs.org/docs/basic-features/typescript). If you are new to TypeScript, go through the Next.js [learning lesson on TypeScript](https://nextjs.org/learn/excel/TypeScript).
 
 Once TypeScript is added, follow the instructions given on the Redux Toolkit [documentation](https://redux-toolkit.js.org/tutorials/TypeScript) to set up and use Redux Toolkit and React-Redux with TypeScript

packages/next/build/index.ts

@@ -151,8 +151,8 @@ export default async function build(
       }
     }
 
-    const buildSpinner = createSpinner({
-      prefixText: `${Log.prefixes.info} Creating an optimized production build`,
+    const typeCheckingSpinner = createSpinner({
+      prefixText: `${Log.prefixes.info} Checking validity of types`,
     })
 
     const telemetry = new Telemetry({ distDir })
@@ -182,6 +182,14 @@ export default async function build(
         verifyTypeScriptSetup(dir, pagesDir, !ignoreTypeScriptErrors)
       )
 
+    if (typeCheckingSpinner) {
+      typeCheckingSpinner.stopAndPersist()
+    }
+
+    const buildSpinner = createSpinner({
+      prefixText: `${Log.prefixes.info} Creating an optimized production build`,
+    })
+
     const isLikeServerless = isTargetLikeServerless(target)
 
     const pagePaths: string[] = await nextBuildSpan

packages/react-dev-overlay/src/internal/helpers/stack-frame.ts

@@ -75,7 +75,9 @@ export function getOriginalStackFrame(
       external: false,
       expanded: !Boolean(
         /* collapsed */
-        body.originalStackFrame?.file?.includes('node_modules') ?? true
+        (source.file?.includes('node_modules') ||
+          body.originalStackFrame?.file?.includes('node_modules')) ??
+          true
       ),
       sourceStackFrame: source,
       originalStackFrame: body.originalStackFrame,

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

@@ -114,12 +114,14 @@ export async function createOriginalStackFrame({
   line,
   column,
   source,
+  modulePath,
   rootDirectory,
   frame,
 }: {
   line: number
   column: number | null
   source: any
+  modulePath?: string
   rootDirectory: string
   frame: any
 }): Promise<OriginalStackFrameResponse | null> {
@@ -140,7 +142,7 @@ export async function createOriginalStackFrame({
 
   const filePath = path.resolve(
     rootDirectory,
-    getSourcePath(sourcePosition.source)
+    modulePath || getSourcePath(sourcePosition.source)
   )
 
   const originalFrame: StackFrame = {
@@ -285,6 +287,7 @@ function getOverlayMiddleware(options: OverlayMiddlewareOptions) {
           column: frameColumn,
           source,
           frame,
+          modulePath: moduleId,
           rootDirectory: options.rootDirectory,
         })
 

test/acceptance/ReactRefreshLogBox.dev.test.js

@@ -630,6 +630,31 @@ test('boundaries', async () => {
   await cleanup()
 })
 
+// https://github.com/vercel/next.js/pull/23203
+test('internal package errors', async () => {
+  const [session, cleanup] = await sandbox()
+
+  // Make a react build-time error.
+  await session.patch(
+    'index.js',
+    `
+      import * as React from 'react';
+      export default function FunctionNamed() {
+        return <div>{{}}</div>
+      }`
+  )
+
+  expect(await session.hasRedbox(true)).toBe(true)
+  // We internally only check the script path, not including the line number
+  // and error message because the error comes from an external library.
+  // This test ensures that the errored script path is correctly resolved.
+  expect(await session.getRedboxSource()).toContain(
+    `../../../../packages/next/dist/pages/_document.js`
+  )
+
+  await cleanup()
+})
+
 test('unterminated JSX', async () => {
   const [session, cleanup] = await sandbox()