Skip to content

Commit

Permalink
[DevOverlay] Enable new UI when PPR testing is enabled
Browse files Browse the repository at this point in the history
  • Loading branch information
devjiwonchoi committed Jan 16, 2025
1 parent c671e8a commit 7c8e142
Show file tree
Hide file tree
Showing 9 changed files with 96 additions and 22 deletions.
4 changes: 3 additions & 1 deletion packages/next/src/build/webpack/plugins/define-env-plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,9 @@ export function getDefineEnv({
}
: undefined),
'process.env.__NEXT_EXPERIMENTAL_NEW_DEV_OVERLAY':
config.experimental.newDevOverlay ?? false,
config.experimental.newDevOverlay ||
// Enable the new dev overlay when PPR is enabled for testing.
process.env.__NEXT_EXPERIMENTAL_PPR === 'true',
}

const userDefines = config.compiler?.define ?? {}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,7 @@ export function CodeFrame({ stackFrame, codeFrame }: CodeFrameProps) {
.map((line, a) =>
~(a = line.indexOf('|'))
? line.substring(0, a) +
line
.substring(a + 1)
.replace(`^\\ {${miniLeadingSpacesLength}}`, '')
line.substring(a).replace(`^\\ {${miniLeadingSpacesLength}}`, '')
: line
)
.join('\n')
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ const DevToolsPopover = ({

return (
<Toast
data-nextjs-toast
style={{
boxShadow: 'none',
zIndex: 2147483647,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,8 @@ export const Terminal: React.FC<TerminalProps> = function Terminal({
>
<span>
<FileIcon />
{getFrameSource(stackFrame)} @{' '}
<HotlinkedText text={stackFrame.methodName} />
{getFrameSource(stackFrame)}
{/* TODO: Unlike the CodeFrame component, the `methodName` is unavailable. */}
</span>
<ExternalIcon width={16} height={16} />
</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,7 @@ export function RuntimeError({ error }: RuntimeErrorProps) {
firstFirstPartyFrameIndex < 0
? []
: filteredFrames.slice(0, firstFirstPartyFrameIndex),
trailingCallStackFrames: filteredFrames.slice(
firstFirstPartyFrameIndex + 1
),
trailingCallStackFrames: filteredFrames.slice(firstFirstPartyFrameIndex),
}
}, [error.frames, isIgnoredExpanded])

Expand Down
5 changes: 4 additions & 1 deletion test/development/app-dir/dynamic-error-trace/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,10 @@ describe('app dir - dynamic error trace', () => {

// TODO: Show useful stack
const normalizedStack = normalizeStackTrace(stackFramesContent)
expect(normalizedStack).toMatchInlineSnapshot(`""`)
expect(normalizedStack).toMatchInlineSnapshot(`
"Foo
app/lib.js"
`)

const codeframe = await getRedboxSource(browser)
expect(codeframe).toEqual(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ const isOwnerStackEnabled =
`)
} else {
expect(stackFramesContent).toMatchInlineSnapshot(`
"at Inner (app/browser/page.js (11:11))
"at BrowserOnly (app/browser/browser-only.js (8:8))
at Inner (app/browser/page.js (11:11))
at Page (app/browser/page.js (15:11))"
`)
expect(source).toMatchInlineSnapshot(`
Expand Down Expand Up @@ -82,9 +83,10 @@ const isOwnerStackEnabled =
8 | export default function Page() {"
`)
} else {
expect(stackFramesContent).toMatchInlineSnapshot(
`"at Page (app/rsc/page.js (11:8))"`
)
expect(stackFramesContent).toMatchInlineSnapshot(`
"at Inner (app/rsc/page.js (5:11))
at Page (app/rsc/page.js (11:8))"
`)
expect(source).toMatchInlineSnapshot(`
"app/rsc/page.js (5:11) @ Inner
Expand Down Expand Up @@ -122,9 +124,10 @@ const isOwnerStackEnabled =
10 | export default function Page() {"
`)
} else {
expect(stackFramesContent).toMatchInlineSnapshot(
`"at Page (app/ssr/page.js (13:8))"`
)
expect(stackFramesContent).toMatchInlineSnapshot(`
"at Inner (app/ssr/page.js (7:11))
at Page (app/ssr/page.js (13:8))"
`)
expect(source).toMatchInlineSnapshot(`
"app/ssr/page.js (7:11) @ Inner
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import {
getRedboxSource,
} from 'next-test-utils'

// Enabling PPR testing also enables the new dev overlay.
const isNewDevOverlay = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'

describe('app-dir - server-component-next-dynamic-ssr-false', () => {
const { next } = nextTestSetup({
files: __dirname,
Expand All @@ -19,8 +22,43 @@ describe('app-dir - server-component-next-dynamic-ssr-false', () => {
}

expect(redbox.description).toBe('Failed to compile')
if (process.env.TURBOPACK) {
expect(redbox.source).toMatchInlineSnapshot(`

// TODO(jiwon): Remove this once we have a new dev overlay at stable.
if (isNewDevOverlay) {
if (process.env.TURBOPACK) {
expect(redbox.source).toMatchInlineSnapshot(`
"./app/page.js (3:23)
Ecmascript file had an error
1 | import dynamic from 'next/dynamic'
2 |
> 3 | const DynamicClient = dynamic(() => import('./client'), { ssr: false })
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 |
5 | export default function Page() {
6 | return <DynamicClient />
\`ssr: false\` is not allowed with \`next/dynamic\` in Server Components. Please move it into a client component."
`)
} else {
expect(redbox.source).toMatchInlineSnapshot(`
"./app/page.js
Error: x \`ssr: false\` is not allowed with \`next/dynamic\` in Server Components. Please move it into a client component.
,-[3:1]
1 | import dynamic from 'next/dynamic'
2 |
3 | const DynamicClient = dynamic(() => import('./client'), { ssr: false })
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 |
5 | export default function Page() {
6 | return <DynamicClient />
\`----"
`)
}
} else {
if (process.env.TURBOPACK) {
expect(redbox.source).toMatchInlineSnapshot(`
"./app/page.js:3:23
Ecmascript file had an error
1 | import dynamic from 'next/dynamic'
Expand All @@ -33,8 +71,8 @@ describe('app-dir - server-component-next-dynamic-ssr-false', () => {
\`ssr: false\` is not allowed with \`next/dynamic\` in Server Components. Please move it into a client component."
`)
} else {
expect(redbox.source).toMatchInlineSnapshot(`
} else {
expect(redbox.source).toMatchInlineSnapshot(`
"./app/page.js
Error: x \`ssr: false\` is not allowed with \`next/dynamic\` in Server Components. Please move it into a client component.
,-[3:1]
Expand All @@ -47,6 +85,7 @@ describe('app-dir - server-component-next-dynamic-ssr-false', () => {
6 | return <DynamicClient />
\`----"
`)
}
}
})
})
32 changes: 31 additions & 1 deletion test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
} from 'next-test-utils'

const isReactExperimental = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
const isNewDevOverlay = isReactExperimental
const isReact18 = parseInt(process.env.NEXT_TEST_REACT_VERSION) === 18

describe('react-dom/server in React Server environment', () => {
Expand Down Expand Up @@ -393,7 +394,35 @@ describe('react-dom/server in React Server environment', () => {
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
// TODO(jiwon): Remove this once we have a new dev overlay at stable.
if (isNewDevOverlay) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Failed to compile",
"source": "./app/exports/app-code/react-dom-server-node-implicit/page.js
Error: x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
| Learn more: https://nextjs.org/docs/app/building-your-application/rendering
,-[1:1]
1 | import * as ReactDOMServerNode from 'react-dom/server'
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerNodeDefault from 'react-dom/server'
\`----
x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
| Learn more: https://nextjs.org/docs/app/building-your-application/rendering
,-[3:1]
1 | import * as ReactDOMServerNode from 'react-dom/server'
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerNodeDefault from 'react-dom/server'
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 |
5 | export const runtime = 'nodejs'
\`----",
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Failed to compile",
"source": "./app/exports/app-code/react-dom-server-node-implicit/page.js
Expand All @@ -417,6 +446,7 @@ describe('react-dom/server in React Server environment', () => {
\`----",
}
`)
}
}
})

Expand Down

0 comments on commit 7c8e142

Please sign in to comment.