mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
1287f9a027
### What?
Changes Turbopack's error overlay to show specific SWC diagnostic
messages as the error title instead of generic messages like "Parsing
ecmascript source code failed" or "Ecmascript file had an error".
### Why?
Previously, all SWC parse/analysis errors in Turbopack showed a generic
title (e.g. "Parsing ecmascript source code failed") in the redbox
header, with the actual specific error message buried in the description
below the code frame. This made it harder for developers to quickly
understand what went wrong.
**Before:**
```
Parsing ecmascript source code failed
> 1 | export default () => <div/
| ^
Expected '>', got '<eof>'
```
**After:**
```
Expected '>', got '<eof>'
> 1 | export default () => <div/
| ^
Parsing ecmascript source code failed
```
### How?
**Core change** in
`turbopack/crates/turbopack-swc-utils/src/emitter.rs`:
When the `IssueEmitter` has a `self.title` set (the generic title like
"Parsing ecmascript source code failed"), the SWC diagnostic message is
now used as the issue title, and the generic title is demoted to the
description. When `self.title` is not set, the existing behavior is
preserved (first line of message becomes title, rest becomes
description).
**Test updates** across ~15 test files:
Updated all `isTurbopack` branches in test expectations to reflect the
swapped title/description. Only Turbopack-specific branches were
modified; webpack and rspack expectations are unchanged.
**New test suite** (`test/development/app-dir/ecmascript-error-title/`):
Dedicated tests verifying that both syntax errors (e.g. `Expected '>',
got '<eof>'`) and analysis errors (e.g. `the name 'Table' is defined
multiple times`) show the specific SWC message as the redbox title.
**Turbopack snapshot updates:**
4 snapshot files renamed to reflect new titles (e.g. `Parsing ecmascript
source code failed-*.txt` → `Expression expected-*.txt`).
---------
Co-authored-by: Claude <[email protected]>
216 lines
6.8 KiB
TypeScript
216 lines
6.8 KiB
TypeScript
import { nextTestSetup } from 'e2e-utils'
|
||
import {
|
||
waitForRedbox,
|
||
waitForNoRedbox,
|
||
getRedboxDescription,
|
||
getRedboxSource,
|
||
retry,
|
||
} from 'next-test-utils'
|
||
import stripAnsi from 'strip-ansi'
|
||
import { createSandbox } from 'development-sandbox'
|
||
|
||
describe('use-cache-unknown-cache-kind', () => {
|
||
const { next, isNextStart, isTurbopack, isRspack, skipped } = nextTestSetup({
|
||
files: __dirname,
|
||
skipStart: process.env.NEXT_TEST_MODE !== 'dev',
|
||
skipDeployment: true,
|
||
})
|
||
|
||
if (skipped) {
|
||
return
|
||
}
|
||
|
||
if (isNextStart) {
|
||
beforeAll(async () => {
|
||
await next.build()
|
||
})
|
||
|
||
it('should fail the build with an error', async () => {
|
||
const buildOutput = getBuildOutput(next.cliOutput)
|
||
|
||
if (isTurbopack) {
|
||
expect(buildOutput).toMatchInlineSnapshot(`
|
||
"Error: Turbopack build failed with 1 errors:
|
||
./app/page.tsx:1:1
|
||
Unknown cache kind "custom". Please configure a cache handler for this kind in the \`cacheHandlers\` object in your Next.js config.
|
||
> 1 | 'use cache: custom'
|
||
| ^^^^^^^^^^^^^^^^^^^
|
||
2 |
|
||
3 | export default async function Page() {
|
||
4 | return <p>hello world</p>
|
||
|
||
Ecmascript file had an error
|
||
|
||
|
||
at <unknown> (./app/page.tsx:1:1)
|
||
"
|
||
`)
|
||
} else if (isRspack) {
|
||
expect(buildOutput).toMatchInlineSnapshot(`
|
||
"
|
||
./app/page.tsx
|
||
╰─▶ × Error: x Unknown cache kind "custom". Please configure a cache handler for this kind in the \`cacheHandlers\` object in your Next.js config.
|
||
│
|
||
│ ,-[1:1]
|
||
│ 1 | 'use cache: custom'
|
||
│ : ^^^^^^^^^^^^^^^^^^^
|
||
│ 2 |
|
||
│ 3 | export default async function Page() {
|
||
│ 4 | return <p>hello world</p>
|
||
│ \`----
|
||
│
|
||
|
||
Import trace for requested module:
|
||
./app/page.tsx
|
||
|
||
|
||
> Build failed because of Rspack errors
|
||
"
|
||
`)
|
||
} else {
|
||
expect(buildOutput).toMatchInlineSnapshot(`
|
||
"
|
||
./app/page.tsx
|
||
Error: x Unknown cache kind "custom". Please configure a cache handler for this kind in the \`cacheHandlers\` object in your Next.js config.
|
||
|
||
,-[1:1]
|
||
1 | 'use cache: custom'
|
||
: ^^^^^^^^^^^^^^^^^^^
|
||
2 |
|
||
3 | export default async function Page() {
|
||
4 | return <p>hello world</p>
|
||
\`----
|
||
|
||
Import trace for requested module:
|
||
./app/page.tsx
|
||
|
||
|
||
> Build failed because of webpack errors
|
||
"
|
||
`)
|
||
}
|
||
})
|
||
|
||
it('should not fail the build for default cache kinds', async () => {
|
||
expect(next.cliOutput).not.toInclude('Unknown cache kind "remote"')
|
||
})
|
||
} else {
|
||
it('should not show an error for default cache kinds', async () => {
|
||
await using sandbox = await createSandbox(next, undefined, '/remote')
|
||
const { browser } = sandbox
|
||
await waitForNoRedbox(browser)
|
||
})
|
||
|
||
it('should show a build error', async () => {
|
||
await using sandbox = await createSandbox(next, undefined, '/')
|
||
const { browser } = sandbox
|
||
|
||
await waitForRedbox(browser)
|
||
|
||
const errorDescription = await getRedboxDescription(browser)
|
||
const errorSource = await getRedboxSource(browser)
|
||
|
||
if (isTurbopack) {
|
||
expect(errorDescription).toMatchInlineSnapshot(
|
||
`"Unknown cache kind "custom". Please configure a cache handler for this kind in the \`cacheHandlers\` object in your Next.js config."`
|
||
)
|
||
} else if (isRspack) {
|
||
expect(errorDescription).toMatchInlineSnapshot(
|
||
`" ╰─▶ × Error: x Unknown cache kind "custom". Please configure a cache handler for this kind in the \`cacheHandlers\` object in your Next.js config."`
|
||
)
|
||
} else {
|
||
expect(errorDescription).toMatchInlineSnapshot(
|
||
`" x Unknown cache kind "custom". Please configure a cache handler for this kind in the \`cacheHandlers\` object in your Next.js config."`
|
||
)
|
||
}
|
||
|
||
if (isTurbopack) {
|
||
expect(errorSource).toMatchInlineSnapshot(`
|
||
"./app/page.tsx (1:1)
|
||
Unknown cache kind "custom". Please configure a cache handler for this kind in the \`cacheHandlers\` object in your Next.js config.
|
||
> 1 | 'use cache: custom'
|
||
| ^^^^^^^^^^^^^^^^^^^
|
||
2 |
|
||
3 | export default async function Page() {
|
||
4 | return <p>hello world</p>
|
||
|
||
Ecmascript file had an error"
|
||
`)
|
||
} else if (isRspack) {
|
||
expect(errorSource).toMatchInlineSnapshot(`
|
||
"./app/page.tsx
|
||
╰─▶ × Error: x Unknown cache kind "custom". Please configure a cache handler for this kind in the \`cacheHandlers\` object in your Next.js config.
|
||
│
|
||
│ ,-[1:1]
|
||
│ 1 | 'use cache: custom'
|
||
│ : ^^^^^^^^^^^^^^^^^^^
|
||
│ 2 |
|
||
│ 3 | export default async function Page() {
|
||
│ 4 | return <p>hello world</p>
|
||
│ \`----
|
||
│"
|
||
`)
|
||
} else {
|
||
expect(errorSource).toMatchInlineSnapshot(`
|
||
"./app/page.tsx
|
||
Error: x Unknown cache kind "custom". Please configure a cache handler for this kind in the \`cacheHandlers\` object in your Next.js config.
|
||
|
||
,-[1:1]
|
||
1 | 'use cache: custom'
|
||
: ^^^^^^^^^^^^^^^^^^^
|
||
2 |
|
||
3 | export default async function Page() {
|
||
4 | return <p>hello world</p>
|
||
\`----"
|
||
`)
|
||
}
|
||
})
|
||
|
||
it('should recover from the build error if the cache handler is defined', async () => {
|
||
await using sandbox = await createSandbox(next, undefined, '/')
|
||
const { browser, session } = sandbox
|
||
|
||
await waitForRedbox(browser)
|
||
|
||
await session.patch(
|
||
'next.config.js',
|
||
`module.exports = {
|
||
cacheComponents: true,
|
||
cacheHandlers: {
|
||
custom: require.resolve(
|
||
'next/dist/server/lib/cache-handlers/default.external'
|
||
),
|
||
},
|
||
}`
|
||
)
|
||
|
||
await retry(async () => {
|
||
expect(await browser.elementByCss('p').text()).toBe('hello world')
|
||
await waitForNoRedbox(browser)
|
||
})
|
||
})
|
||
}
|
||
})
|
||
|
||
function getBuildOutput(cliOutput: string): string {
|
||
const lines: string[] = []
|
||
let skipLines = true
|
||
|
||
for (const line of cliOutput.split('\n')) {
|
||
if (!skipLines) {
|
||
if (line.includes('at turbopackBuild')) {
|
||
break
|
||
}
|
||
|
||
lines.push(stripAnsi(line))
|
||
} else if (
|
||
line.includes('Build error occurred') ||
|
||
line.includes('Failed to compile')
|
||
) {
|
||
skipLines = false
|
||
}
|
||
}
|
||
|
||
return lines.join('\n')
|
||
}
|