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]>
91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
import { nextTestSetup } from 'e2e-utils'
|
||
|
||
import { waitForRedbox } from 'next-test-utils'
|
||
|
||
// Filter CLI output to only keep Turbopack error header lines (starting with ⨯ or
|
||
// standalone file:line:col) to accurately count error occurrences without counting
|
||
// console.error, stack traces, or forwarded browser logs.
|
||
function filterToErrorHeaders(output: string): string {
|
||
return output
|
||
.split('\n')
|
||
.filter(
|
||
(line) =>
|
||
!line.includes('[browser]') &&
|
||
!line.includes('console.error') &&
|
||
!line.includes('at <unknown>') &&
|
||
!line.includes('at Object.') &&
|
||
!line.includes('at DevServer.') &&
|
||
!line.includes('at DevBundlerService.') &&
|
||
!line.includes('at async ')
|
||
)
|
||
.join('\n')
|
||
}
|
||
|
||
// Only Turbopack runs the transform on the layout once in edge and non-edge contexts
|
||
// so we only test this on Turbopack
|
||
;(process.env.IS_TURBOPACK_TEST ? describe : describe.skip)(
|
||
'cache-components-edge-deduplication',
|
||
() => {
|
||
const { next, skipped, isNextDev } = nextTestSetup({
|
||
files: __dirname + '/fixtures/edge-deduplication',
|
||
skipStart: true,
|
||
skipDeployment: true,
|
||
})
|
||
|
||
if (skipped) {
|
||
return
|
||
}
|
||
|
||
it('should not duplicate errors when layout is compiled for both edge and non-edge contexts', async () => {
|
||
try {
|
||
await next.start()
|
||
} catch {
|
||
// we expect the build to fail
|
||
}
|
||
|
||
if (isNextDev) {
|
||
const browser = await next.browser('/edge-with-layout/edge')
|
||
waitForRedbox(browser)
|
||
await expect(browser).toDisplayRedbox(`
|
||
{
|
||
"description": "Route segment config "dynamic" is not compatible with \`nextConfig.cacheComponents\`. Please remove it.",
|
||
"environmentLabel": null,
|
||
"label": "Build Error",
|
||
"source": "./app/edge-with-layout/layout.tsx (1:14)
|
||
Route segment config "dynamic" is not compatible with \`nextConfig.cacheComponents\`. Please remove it.
|
||
> 1 | export const dynamic = 'force-dynamic'
|
||
| ^^^^^^^",
|
||
"stack": [],
|
||
}
|
||
`)
|
||
|
||
// Count occurrences of the layout error at the specific location
|
||
// Filter out browser logs to avoid counting forwarded browser errors
|
||
const filteredOutput = filterToErrorHeaders(next.cliOutput)
|
||
const layoutErrorMatches = filteredOutput.match(
|
||
/\.\/app\/edge-with-layout\/layout\.tsx:1:14/g
|
||
)
|
||
// We don't show an error stack, just the individual error messages at each location
|
||
expect(layoutErrorMatches.length).toBe(1)
|
||
} else {
|
||
// Check that both the layout and edge page errors appear
|
||
expect(next.cliOutput).toContain('./app/edge-with-layout/layout.tsx')
|
||
expect(next.cliOutput).toContain('./app/edge-with-layout/edge/page.tsx')
|
||
expect(next.cliOutput).toContain(
|
||
'"dynamic" is not compatible with `nextConfig.cacheComponents`. Please remove it.'
|
||
)
|
||
expect(next.cliOutput).toContain(
|
||
'"runtime" is not compatible with `nextConfig.cacheComponents`. Please remove it.'
|
||
)
|
||
// Count occurrences of the layout error at the specific location
|
||
const layoutErrorMatches = next.cliOutput.match(
|
||
/\.\/app\/layout\.tsx:1:14/g
|
||
)
|
||
|
||
// Should appear exactly twice: once in the formatted error message, once in the stack trace
|
||
expect(layoutErrorMatches.length).toBe(2)
|
||
}
|
||
})
|
||
}
|
||
)
|