mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +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]>
318 lines
9.4 KiB
TypeScript
318 lines
9.4 KiB
TypeScript
import { createSandbox } from 'development-sandbox'
|
||
import { FileRef, nextTestSetup } from 'e2e-utils'
|
||
import { outdent } from 'outdent'
|
||
import path from 'path'
|
||
|
||
const isRspack = process.env.NEXT_RSPACK !== undefined
|
||
|
||
describe('ReactRefreshLogBox _app _document', () => {
|
||
const { isTurbopack, next } = nextTestSetup({
|
||
files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
|
||
skipStart: true,
|
||
})
|
||
|
||
test('empty _app shows logbox', async () => {
|
||
await using sandbox = await createSandbox(
|
||
next,
|
||
new Map([['pages/_app.js', ``]])
|
||
)
|
||
const { browser, session } = sandbox
|
||
await expect(browser).toDisplayRedbox(`
|
||
{
|
||
"code": "E394",
|
||
"description": "The default export is not a React Component in page: "/_app"",
|
||
"environmentLabel": null,
|
||
"label": "Runtime Error",
|
||
"source": null,
|
||
"stack": [],
|
||
}
|
||
`)
|
||
|
||
await session.patch(
|
||
'pages/_app.js',
|
||
outdent`
|
||
function MyApp({ Component, pageProps }) {
|
||
return <Component {...pageProps} />;
|
||
}
|
||
export default MyApp
|
||
`
|
||
)
|
||
await session.waitForNoRedbox()
|
||
})
|
||
|
||
test('empty _document shows logbox', async () => {
|
||
await using sandbox = await createSandbox(
|
||
next,
|
||
new Map([['pages/_document.js', ``]])
|
||
)
|
||
const { browser, session } = sandbox
|
||
|
||
await expect(browser).toDisplayRedbox(`
|
||
{
|
||
"code": "E394",
|
||
"description": "The default export is not a React Component in page: "/_document"",
|
||
"environmentLabel": null,
|
||
"label": "Runtime Error",
|
||
"source": null,
|
||
"stack": [],
|
||
}
|
||
`)
|
||
|
||
await session.patch(
|
||
'pages/_document.js',
|
||
outdent`
|
||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||
|
||
class MyDocument extends Document {
|
||
static async getInitialProps(ctx) {
|
||
const initialProps = await Document.getInitialProps(ctx)
|
||
return { ...initialProps }
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<Html>
|
||
<Head />
|
||
<body>
|
||
<Main />
|
||
<NextScript />
|
||
</body>
|
||
</Html>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default MyDocument
|
||
`
|
||
)
|
||
await session.waitForNoRedbox()
|
||
})
|
||
|
||
test('_app syntax error shows logbox', async () => {
|
||
await using sandbox = await createSandbox(
|
||
next,
|
||
new Map([
|
||
[
|
||
'pages/_app.js',
|
||
outdent`
|
||
function MyApp({ Component, pageProps }) {
|
||
return <<Component {...pageProps} />;
|
||
}
|
||
export default MyApp
|
||
`,
|
||
],
|
||
])
|
||
)
|
||
const { browser, session } = sandbox
|
||
|
||
if (isTurbopack) {
|
||
await expect(browser).toDisplayRedbox(`
|
||
{
|
||
"description": "Expression expected",
|
||
"environmentLabel": null,
|
||
"label": "Build Error",
|
||
"source": "./pages/_app.js (2:10)
|
||
Expression expected
|
||
> 2 | return <<Component {...pageProps} />;
|
||
| ^^",
|
||
"stack": [],
|
||
}
|
||
`)
|
||
} else if (isRspack) {
|
||
await expect({ browser, next }).toDisplayRedbox(`
|
||
{
|
||
"description": " ╰─▶ × Error: x Expression expected",
|
||
"environmentLabel": null,
|
||
"label": "Build Error",
|
||
"source": "./pages/_app.js
|
||
╰─▶ × Error: x Expression expected
|
||
│ ,-[2:1]
|
||
│ 1 | function MyApp({ Component, pageProps }) {
|
||
│ 2 | return <<Component {...pageProps} />;
|
||
│ : ^^
|
||
│ 3 | }
|
||
│ 4 | export default MyApp
|
||
│ \`----
|
||
│ x Expected ';', got '{'
|
||
│ ,-[2:1]
|
||
│ 1 | function MyApp({ Component, pageProps }) {
|
||
│ 2 | return <<Component {...pageProps} />;
|
||
│ : ^
|
||
│ 3 | }
|
||
│ 4 | export default MyApp
|
||
│ \`----
|
||
│
|
||
│
|
||
│ Caused by:
|
||
│ Syntax Error",
|
||
"stack": [],
|
||
}
|
||
`)
|
||
} else {
|
||
await expect(browser).toDisplayRedbox(`
|
||
{
|
||
"description": " x Expression expected",
|
||
"environmentLabel": null,
|
||
"label": "Build Error",
|
||
"source": "./pages/_app.js
|
||
Error: x Expression expected
|
||
,-[2:1]
|
||
1 | function MyApp({ Component, pageProps }) {
|
||
2 | return <<Component {...pageProps} />;
|
||
: ^^
|
||
3 | }
|
||
4 | export default MyApp
|
||
\`----
|
||
x Expected ';', got '{'
|
||
,-[2:1]
|
||
1 | function MyApp({ Component, pageProps }) {
|
||
2 | return <<Component {...pageProps} />;
|
||
: ^
|
||
3 | }
|
||
4 | export default MyApp
|
||
\`----
|
||
Caused by:
|
||
Syntax Error",
|
||
"stack": [],
|
||
}
|
||
`)
|
||
}
|
||
|
||
await session.patch(
|
||
'pages/_app.js',
|
||
outdent`
|
||
function MyApp({ Component, pageProps }) {
|
||
return <Component {...pageProps} />;
|
||
}
|
||
export default MyApp
|
||
`
|
||
)
|
||
await session.waitForNoRedbox()
|
||
})
|
||
|
||
test('_document syntax error shows logbox', async () => {
|
||
await using sandbox = await createSandbox(
|
||
next,
|
||
new Map([
|
||
[
|
||
'pages/_document.js',
|
||
outdent`
|
||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||
|
||
class MyDocument extends Document {{
|
||
static async getInitialProps(ctx) {
|
||
const initialProps = await Document.getInitialProps(ctx)
|
||
return { ...initialProps }
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<Html>
|
||
<Head />
|
||
<body>
|
||
<Main />
|
||
<NextScript />
|
||
</body>
|
||
</Html>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default MyDocument
|
||
`,
|
||
],
|
||
])
|
||
)
|
||
const { browser, session } = sandbox
|
||
if (isTurbopack) {
|
||
await expect(browser).toDisplayRedbox(`
|
||
{
|
||
"description": "Unexpected token \`{\`. Expected identifier, string literal, numeric literal or [ for the computed key",
|
||
"environmentLabel": null,
|
||
"label": "Build Error",
|
||
"source": "./pages/_document.js (3:36)
|
||
Unexpected token \`{\`. Expected identifier, string literal, numeric literal or [ for the computed key
|
||
> 3 | class MyDocument extends Document {{
|
||
| ^",
|
||
"stack": [],
|
||
}
|
||
`)
|
||
} else if (isRspack) {
|
||
await expect({ browser, next }).toDisplayRedbox(`
|
||
{
|
||
"description": " ╰─▶ × Error: x Unexpected token \`{\`. Expected identifier, string literal, numeric literal or [ for the computed key",
|
||
"environmentLabel": null,
|
||
"label": "Build Error",
|
||
"source": "./pages/_document.js
|
||
╰─▶ × Error: x Unexpected token \`{\`. Expected identifier, string literal, numeric literal or [ for the computed key
|
||
│ ,-[3:1]
|
||
│ 1 | import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||
│ 2 |
|
||
│ 3 | class MyDocument extends Document {{
|
||
│ : ^
|
||
│ 4 | static async getInitialProps(ctx) {
|
||
│ 5 | const initialProps = await Document.getInitialProps(ctx)
|
||
│ 6 | return { ...initialProps }
|
||
│ \`----
|
||
│
|
||
│
|
||
│ Caused by:
|
||
│ Syntax Error",
|
||
"stack": [],
|
||
}
|
||
`)
|
||
} else {
|
||
await expect(browser).toDisplayRedbox(`
|
||
{
|
||
"description": " x Unexpected token \`{\`. Expected identifier, string literal, numeric literal or [ for the computed key",
|
||
"environmentLabel": null,
|
||
"label": "Build Error",
|
||
"source": "./pages/_document.js
|
||
Error: x Unexpected token \`{\`. Expected identifier, string literal, numeric literal or [ for the computed key
|
||
,-[3:1]
|
||
1 | import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||
2 |
|
||
3 | class MyDocument extends Document {{
|
||
: ^
|
||
4 | static async getInitialProps(ctx) {
|
||
5 | const initialProps = await Document.getInitialProps(ctx)
|
||
6 | return { ...initialProps }
|
||
\`----
|
||
Caused by:
|
||
Syntax Error",
|
||
"stack": [],
|
||
}
|
||
`)
|
||
}
|
||
|
||
await session.patch(
|
||
'pages/_document.js',
|
||
outdent`
|
||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||
|
||
class MyDocument extends Document {
|
||
static async getInitialProps(ctx) {
|
||
const initialProps = await Document.getInitialProps(ctx)
|
||
return { ...initialProps }
|
||
}
|
||
|
||
render() {
|
||
return (
|
||
<Html>
|
||
<Head />
|
||
<body>
|
||
<Main />
|
||
<NextScript />
|
||
</body>
|
||
</Html>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default MyDocument
|
||
`
|
||
)
|
||
await session.waitForNoRedbox()
|
||
})
|
||
})
|