mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Niklas MischkulnigandGitHub
9b8a7a1055
1. Align the code highlight marker color with the issue severity 2. Make the issue title colored 3. Prefix issues with `Warning` or `Error` <img width="1383" height="862" alt="Bildschirmfoto 2026-06-16 um 18 59 03" src="https://github.com/user-attachments/assets/f98c606d-4ea8-40c2-836d-e395f1df904c" /> <img width="1039" height="450" alt="Bildschirmfoto 2026-06-16 um 19 03 39" src="https://github.com/user-attachments/assets/2747f914-0587-4178-a87d-344f24715c96" /> <details> <summary>Old</summary> <img width="1267" height="745" alt="Bildschirmfoto 2026-06-16 um 17 04 35" src="https://github.com/user-attachments/assets/837739ff-82f7-4ea2-8767-ca7d866a8570" /> </details>
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": "E464",
|
||
"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": "E511",
|
||
"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)
|
||
Error: 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)
|
||
Error: 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()
|
||
})
|
||
})
|