Redesign the unrendered-segment instant validation overlay by aurorascharff · Pull Request #93879 · vercel/next.js

aurorascharff · 2026-05-15T22:33:50Z

What?

A focused dev-overlay redesign and CLI/build message refresh for the "expected segment was not rendered" instant validation warning (PR #93770).

Why?

The wrapper carries no useful source location to point at — the code-frame chrome and Call Stack the overlay rendered before were misleading. Users mostly need to know which segment didn't render and where to set instant = false to silence the warning.

Demo

81-instant-wrapper-unrendered-segment

How

Restructured framework message in dynamic-rendering.ts: leads with Route "<path>": prefix like every other validation factory, drops the verbose paragraphs in favour of a one-sentence explanation + Ways to fix this: list, and uses instant not unstable_instant in the fix bullet.
New unrendered-segment GuidanceKind and a dedicated case in errors.tsx that drops the code-frame and Call Stack.
New UnrenderedSegmentInfo component renders the route + each unrendered file with the same chrome as CodeFrame, plus open-in-editor.
Two fix cards: Render the missing segment (render, gray) and Allow no validation (silence, red).

…rcel/next.js into aurorascharff/redesign-unrendered-segment-overlay

github-actions · 2026-05-15T23:56:45Z

Failing test suites

Commit: dcf251d | About building and testing Next.js

pnpm test-dev test/e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts (job)

instant validation - parallel slot configs > dev - client navigation > conditional slot rendering > errors when configured children slot is hidden, no cookies (DD)
instant validation - parallel slot configs > dev - initial load > conditional slot rendering > errors when configured children slot is hidden, no cookies (DD)

Expand output

● instant validation - parallel slot configs › dev - initial load › conditional slot rendering › errors when configured children slot is hidden, no cookies

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation - parallel slot configs dev - initial load conditional slot rendering errors when configured children slot is hidden, no cookies 1`

- Snapshot  - 16
+ Received  + 12

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segment:
-   app/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked/page.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ parallel/
+ │ │  │  ├─ conditional-breadcrumbs/
+ │ │  │  │  ├─ show-only-breadcrumbs/
+ │ │  │  │  │  ├─ unblocked/
+ │                └─ page.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  582 |         if (isNextDev) {
  583 |           const browser = await navigateTo(href)
> 584 |           await expect(browser).toDisplayCollapsedRedbox(`
      |                                 ^
  585 |            {
  586 |              "code": "E1248",
  587 |              "description": "Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts:584:33)

● instant validation - parallel slot configs › dev - client navigation › conditional slot rendering › errors when configured children slot is hidden, no cookies

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation - parallel slot configs dev - client navigation conditional slot rendering errors when configured children slot is hidden, no cookies 1`

- Snapshot  - 16
+ Received  + 12

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segment:
-   app/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked/page.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ parallel/
+ │ │  │  ├─ conditional-breadcrumbs/
+ │ │  │  │  ├─ show-only-breadcrumbs/
+ │ │  │  │  │  ├─ unblocked/
+ │                └─ page.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  582 |         if (isNextDev) {
  583 |           const browser = await navigateTo(href)
> 584 |           await expect(browser).toDisplayCollapsedRedbox(`
      |                                 ^
  585 |            {
  586 |              "code": "E1248",
  587 |              "description": "Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts:584:33)

pnpm test-dev test/e2e/app-dir/instant-validation/instant-validation.test.ts (job)

instant validation > dev - client navigation > multi-depth fallback deferral > surfaces deferred fallback when no shallower depth has a real error (DD)
instant validation > dev - client navigation > unrendered segment file reporting > reports the shallowest unrendered file, not the configured file (DD)
instant validation > dev - client navigation > unrendered segment file reporting > reports the boundary segment layout when multiple slots are dropped (DD)
instant validation > dev - initial load > multi-depth fallback deferral > surfaces deferred fallback when no shallower depth has a real error (DD)
instant validation > dev - initial load > unrendered segment file reporting > reports the shallowest unrendered file, not the configured file (DD)
instant validation > dev - initial load > unrendered segment file reporting > reports the boundary segment layout when multiple slots are dropped (DD)

Expand output

● instant validation › dev - initial load › multi-depth fallback deferral › surfaces deferred fallback when no shallower depth has a real error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation dev - initial load multi-depth fallback deferral surfaces deferred fallback when no shallower depth has a real error 1`

- Snapshot  - 16
+ Received  + 11

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segment:
-   app/suspense-in-root/static/multi-depth-deferred-fallback/inner/page.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/static/multi-depth-deferred-fallback/inner
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ static/
+ │ │  │  ├─ multi-depth-deferred-fallback/
+ │ │  │  │  ├─ inner/
+ │             └─ page.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  3411 |             '/suspense-in-root/static/multi-depth-deferred-fallback/inner'
  3412 |           )
> 3413 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  3414 |            {
  3415 |              "code": "E1248",
  3416 |              "description": "Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation.test.ts:3413:33)

● instant validation › dev - initial load › unrendered segment file reporting › reports the shallowest unrendered file, not the configured file

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation dev - initial load unrendered segment file reporting reports the shallowest unrendered file, not the configured file 1`

- Snapshot  - 16
+ Received  + 11

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/static/test-firstmod/inter/inner": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segment:
-   app/suspense-in-root/static/test-firstmod/inter/layout.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/static/test-firstmod/inter/inner
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ static/
+ │ │  │  ├─ test-firstmod/
+ │ │  │  │  ├─ inter/
+ │             └─ layout.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  3475 |             '/suspense-in-root/static/test-firstmod/inter/inner'
  3476 |           )
> 3477 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  3478 |            {
  3479 |              "code": "E1248",
  3480 |              "description": "Route "/suspense-in-root/static/test-firstmod/inter/inner": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation.test.ts:3477:33)

● instant validation › dev - initial load › unrendered segment file reporting › reports the boundary segment layout when multiple slots are dropped

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation dev - initial load unrendered segment file reporting reports the boundary segment layout when multiple slots are dropped 1`

- Snapshot  - 17
+ Received  + 12

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/static/test-multi-unrendered": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segments:
-   app/suspense-in-root/static/test-multi-unrendered/@sidebar/page.tsx
-   app/suspense-in-root/static/test-multi-unrendered/page.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/static/test-multi-unrendered
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ static/
+ │ │  │  ├─ test-multi-unrendered/
+ │ │  │  │  ├─ @sidebar/
+ │ │  │  │  │  └─ page.tsx ← dropped from rendering
+ │          └─ page.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  3537 |             '/suspense-in-root/static/test-multi-unrendered'
  3538 |           )
> 3539 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  3540 |            {
  3541 |              "code": "E1248",
  3542 |              "description": "Route "/suspense-in-root/static/test-multi-unrendered": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation.test.ts:3539:33)

● instant validation › dev - client navigation › multi-depth fallback deferral › surfaces deferred fallback when no shallower depth has a real error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation dev - client navigation multi-depth fallback deferral surfaces deferred fallback when no shallower depth has a real error 1`

- Snapshot  - 16
+ Received  + 11

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segment:
-   app/suspense-in-root/static/multi-depth-deferred-fallback/inner/page.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/static/multi-depth-deferred-fallback/inner
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ static/
+ │ │  │  ├─ multi-depth-deferred-fallback/
+ │ │  │  │  ├─ inner/
+ │             └─ page.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  3411 |             '/suspense-in-root/static/multi-depth-deferred-fallback/inner'
  3412 |           )
> 3413 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  3414 |            {
  3415 |              "code": "E1248",
  3416 |              "description": "Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation.test.ts:3413:33)

● instant validation › dev - client navigation › unrendered segment file reporting › reports the shallowest unrendered file, not the configured file

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation dev - client navigation unrendered segment file reporting reports the shallowest unrendered file, not the configured file 1`

- Snapshot  - 16
+ Received  + 11

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/static/test-firstmod/inter/inner": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segment:
-   app/suspense-in-root/static/test-firstmod/inter/layout.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/static/test-firstmod/inter/inner
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ static/
+ │ │  │  ├─ test-firstmod/
+ │ │  │  │  ├─ inter/
+ │             └─ layout.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  3475 |             '/suspense-in-root/static/test-firstmod/inter/inner'
  3476 |           )
> 3477 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  3478 |            {
  3479 |              "code": "E1248",
  3480 |              "description": "Route "/suspense-in-root/static/test-firstmod/inter/inner": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation.test.ts:3477:33)

● instant validation › dev - client navigation › unrendered segment file reporting › reports the boundary segment layout when multiple slots are dropped

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation dev - client navigation unrendered segment file reporting reports the boundary segment layout when multiple slots are dropped 1`

- Snapshot  - 17
+ Received  + 12

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/static/test-multi-unrendered": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segments:
-   app/suspense-in-root/static/test-multi-unrendered/@sidebar/page.tsx
-   app/suspense-in-root/static/test-multi-unrendered/page.tsx

... truncated ...

pnpm test-start test/e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts (job)

instant validation - parallel slot configs > build > conditional slot rendering > errors when configured children slot is hidden, no cookies (DD)

Expand output

● instant validation - parallel slot configs › build › conditional slot rendering › errors when configured children slot is hidden, no cookies

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation - parallel slot configs build conditional slot rendering errors when configured children slot is hidden, no cookies 1`

- Snapshot  - 1
+ Received  + 0

@@ -1,10 +1,9 @@
  "Error: Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked": Could not validate that a segment in your UI has instant navigation.

  This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

-
  Dropped segment:
    app/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked/page.tsx

  Ways to fix this:
    - Render the dropped segment

  607 |           const result = await prerender(href)
  608 |           expect(extractBuildValidationError(result.cliOutput))
> 609 |             .toMatchInlineSnapshot(`
      |              ^
  610 |            "Error: Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked": Could not validate that a segment in your UI has instant navigation.
  611 |
  612 |            This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

  at Object.toMatchInlineSnapshot (e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts:609:14)

pnpm test-start test/e2e/app-dir/instant-validation/instant-validation.test.ts (job)

instant validation > build > multi-depth fallback deferral > surfaces deferred fallback when no shallower depth has a real error (DD)
instant validation > build > unrendered segment file reporting > reports the shallowest unrendered file, not the configured file (DD)
instant validation > build > unrendered segment file reporting > reports the boundary segment layout when multiple slots are dropped (DD)

Expand output

● instant validation › build › multi-depth fallback deferral › surfaces deferred fallback when no shallower depth has a real error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation build multi-depth fallback deferral surfaces deferred fallback when no shallower depth has a real error 1`

- Snapshot  - 1
+ Received  + 0

@@ -1,10 +1,9 @@
  "Error: Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.

  This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

-
  Dropped segment:
    app/suspense-in-root/static/multi-depth-deferred-fallback/inner/page.tsx

  Ways to fix this:
    - Render the dropped segment

  3438 |           )
  3439 |           expect(extractBuildValidationError(result.cliOutput))
> 3440 |             .toMatchInlineSnapshot(`
       |              ^
  3441 |            "Error: Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.
  3442 |
  3443 |            This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

  at Object.toMatchInlineSnapshot (e2e/app-dir/instant-validation/instant-validation.test.ts:3440:14)

● instant validation › build › unrendered segment file reporting › reports the shallowest unrendered file, not the configured file

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation build unrendered segment file reporting reports the shallowest unrendered file, not the configured file 1`

- Snapshot  - 1
+ Received  + 0

@@ -1,10 +1,9 @@
  "Error: Route "/suspense-in-root/static/test-firstmod/inter/inner": Could not validate that a segment in your UI has instant navigation.

  This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

-
  Dropped segment:
    app/suspense-in-root/static/test-firstmod/inter/layout.tsx

  Ways to fix this:
    - Render the dropped segment

  3502 |           )
  3503 |           expect(extractBuildValidationError(result.cliOutput))
> 3504 |             .toMatchInlineSnapshot(`
       |              ^
  3505 |            "Error: Route "/suspense-in-root/static/test-firstmod/inter/inner": Could not validate that a segment in your UI has instant navigation.
  3506 |
  3507 |            This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

  at Object.toMatchInlineSnapshot (e2e/app-dir/instant-validation/instant-validation.test.ts:3504:14)

● instant validation › build › unrendered segment file reporting › reports the boundary segment layout when multiple slots are dropped

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation build unrendered segment file reporting reports the boundary segment layout when multiple slots are dropped 1`

- Snapshot  - 1
+ Received  + 0

@@ -1,10 +1,9 @@
  "Error: Route "/suspense-in-root/static/test-multi-unrendered": Could not validate that a segment in your UI has instant navigation.

  This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

-
  Dropped segments:
    app/suspense-in-root/static/test-multi-unrendered/@sidebar/page.tsx
    app/suspense-in-root/static/test-multi-unrendered/page.tsx

  Ways to fix this:

  3565 |           )
  3566 |           expect(extractBuildValidationError(result.cliOutput))
> 3567 |             .toMatchInlineSnapshot(`
       |              ^
  3568 |            "Error: Route "/suspense-in-root/static/test-multi-unrendered": Could not validate that a segment in your UI has instant navigation.
  3569 |
  3570 |            This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

  at Object.toMatchInlineSnapshot (e2e/app-dir/instant-validation/instant-validation.test.ts:3567:14)

pnpm test-dev test/e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts (job)

instant validation - parallel slot configs > dev - client navigation > conditional slot rendering > errors when configured children slot is hidden, no cookies (DD)
instant validation - parallel slot configs > dev - initial load > conditional slot rendering > errors when configured children slot is hidden, no cookies (DD)

Expand output

● instant validation - parallel slot configs › dev - initial load › conditional slot rendering › errors when configured children slot is hidden, no cookies

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation - parallel slot configs dev - initial load conditional slot rendering errors when configured children slot is hidden, no cookies 1`

- Snapshot  - 16
+ Received  + 12

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segment:
-   app/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked/page.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ parallel/
+ │ │  │  ├─ conditional-breadcrumbs/
+ │ │  │  │  ├─ show-only-breadcrumbs/
+ │ │  │  │  │  ├─ unblocked/
+ │                └─ page.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  582 |         if (isNextDev) {
  583 |           const browser = await navigateTo(href)
> 584 |           await expect(browser).toDisplayCollapsedRedbox(`
      |                                 ^
  585 |            {
  586 |              "code": "E1248",
  587 |              "description": "Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts:584:33)

● instant validation - parallel slot configs › dev - client navigation › conditional slot rendering › errors when configured children slot is hidden, no cookies

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation - parallel slot configs dev - client navigation conditional slot rendering errors when configured children slot is hidden, no cookies 1`

- Snapshot  - 16
+ Received  + 12

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segment:
-   app/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked/page.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ parallel/
+ │ │  │  ├─ conditional-breadcrumbs/
+ │ │  │  │  ├─ show-only-breadcrumbs/
+ │ │  │  │  │  ├─ unblocked/
+ │                └─ page.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  582 |         if (isNextDev) {
  583 |           const browser = await navigateTo(href)
> 584 |           await expect(browser).toDisplayCollapsedRedbox(`
      |                                 ^
  585 |            {
  586 |              "code": "E1248",
  587 |              "description": "Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts:584:33)

pnpm test-dev test/e2e/app-dir/instant-validation/instant-validation.test.ts (job)

instant validation > dev - client navigation > multi-depth fallback deferral > surfaces deferred fallback when no shallower depth has a real error (DD)
instant validation > dev - client navigation > unrendered segment file reporting > reports the shallowest unrendered file, not the configured file (DD)
instant validation > dev - client navigation > unrendered segment file reporting > reports the boundary segment layout when multiple slots are dropped (DD)
instant validation > dev - initial load > multi-depth fallback deferral > surfaces deferred fallback when no shallower depth has a real error (DD)
instant validation > dev - initial load > unrendered segment file reporting > reports the shallowest unrendered file, not the configured file (DD)
instant validation > dev - initial load > unrendered segment file reporting > reports the boundary segment layout when multiple slots are dropped (DD)

Expand output

● instant validation › dev - initial load › multi-depth fallback deferral › surfaces deferred fallback when no shallower depth has a real error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation dev - initial load multi-depth fallback deferral surfaces deferred fallback when no shallower depth has a real error 1`

- Snapshot  - 16
+ Received  + 11

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segment:
-   app/suspense-in-root/static/multi-depth-deferred-fallback/inner/page.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/static/multi-depth-deferred-fallback/inner
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ static/
+ │ │  │  ├─ multi-depth-deferred-fallback/
+ │ │  │  │  ├─ inner/
+ │             └─ page.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  3411 |             '/suspense-in-root/static/multi-depth-deferred-fallback/inner'
  3412 |           )
> 3413 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  3414 |            {
  3415 |              "code": "E1248",
  3416 |              "description": "Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation.test.ts:3413:33)

● instant validation › dev - initial load › unrendered segment file reporting › reports the shallowest unrendered file, not the configured file

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation dev - initial load unrendered segment file reporting reports the shallowest unrendered file, not the configured file 1`

- Snapshot  - 16
+ Received  + 11

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/static/test-firstmod/inter/inner": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segment:
-   app/suspense-in-root/static/test-firstmod/inter/layout.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/static/test-firstmod/inter/inner
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ static/
+ │ │  │  ├─ test-firstmod/
+ │ │  │  │  ├─ inter/
+ │             └─ layout.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  3475 |             '/suspense-in-root/static/test-firstmod/inter/inner'
  3476 |           )
> 3477 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  3478 |            {
  3479 |              "code": "E1248",
  3480 |              "description": "Route "/suspense-in-root/static/test-firstmod/inter/inner": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation.test.ts:3477:33)

● instant validation › dev - initial load › unrendered segment file reporting › reports the boundary segment layout when multiple slots are dropped

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation dev - initial load unrendered segment file reporting reports the boundary segment layout when multiple slots are dropped 1`

- Snapshot  - 17
+ Received  + 12

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/static/test-multi-unrendered": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segments:
-   app/suspense-in-root/static/test-multi-unrendered/@sidebar/page.tsx
-   app/suspense-in-root/static/test-multi-unrendered/page.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/static/test-multi-unrendered
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ static/
+ │ │  │  ├─ test-multi-unrendered/
+ │ │  │  │  ├─ @sidebar/
+ │ │  │  │  │  └─ page.tsx ← dropped from rendering
+ │          └─ page.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  3537 |             '/suspense-in-root/static/test-multi-unrendered'
  3538 |           )
> 3539 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  3540 |            {
  3541 |              "code": "E1248",
  3542 |              "description": "Route "/suspense-in-root/static/test-multi-unrendered": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation.test.ts:3539:33)

● instant validation › dev - client navigation › multi-depth fallback deferral › surfaces deferred fallback when no shallower depth has a real error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation dev - client navigation multi-depth fallback deferral surfaces deferred fallback when no shallower depth has a real error 1`

- Snapshot  - 16
+ Received  + 11

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segment:
-   app/suspense-in-root/static/multi-depth-deferred-fallback/inner/page.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/static/multi-depth-deferred-fallback/inner
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ static/
+ │ │  │  ├─ multi-depth-deferred-fallback/
+ │ │  │  │  ├─ inner/
+ │             └─ page.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  3411 |             '/suspense-in-root/static/multi-depth-deferred-fallback/inner'
  3412 |           )
> 3413 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  3414 |            {
  3415 |              "code": "E1248",
  3416 |              "description": "Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation.test.ts:3413:33)

● instant validation › dev - client navigation › unrendered segment file reporting › reports the shallowest unrendered file, not the configured file

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation dev - client navigation unrendered segment file reporting reports the shallowest unrendered file, not the configured file 1`

- Snapshot  - 16
+ Received  + 11

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/static/test-firstmod/inter/inner": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segment:
-   app/suspense-in-root/static/test-firstmod/inter/layout.tsx
-
- Ways to fix this:
-   - Render the dropped segment
-   - Set `export const instant = false` on the dropped segment to skip validation
-
- Learn more: https://nextjs.org/docs/messages/unrendered-instant-segment",
+   "code": "E1253",
+   "description": "Next.js could not validate that a segment in your UI has instant navigation.",
    "environmentLabel": "Server",
-   "label": "Console Error",
-   "source": null,
+   "label": "Instant",
+   "source": "/suspense-in-root/static/test-firstmod/inter/inner
+ │
+ │ ├─ suspense-in-root/
+ │ │  ├─ static/
+ │ │  │  ├─ test-firstmod/
+ │ │  │  │  ├─ inter/
+ │             └─ layout.tsx ← dropped from rendering
+ │",
    "stack": [],
  }

  3475 |             '/suspense-in-root/static/test-firstmod/inter/inner'
  3476 |           )
> 3477 |           await expect(browser).toDisplayCollapsedRedbox(`
       |                                 ^
  3478 |            {
  3479 |              "code": "E1248",
  3480 |              "description": "Route "/suspense-in-root/static/test-firstmod/inter/inner": Could not validate that a segment in your UI has instant navigation.

  at Object.toDisplayCollapsedRedbox (e2e/app-dir/instant-validation/instant-validation.test.ts:3477:33)

● instant validation › dev - client navigation › unrendered segment file reporting › reports the boundary segment layout when multiple slots are dropped

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation dev - client navigation unrendered segment file reporting reports the boundary segment layout when multiple slots are dropped 1`

- Snapshot  - 17
+ Received  + 12

  {
-   "code": "E1248",
-   "description": "Route "/suspense-in-root/static/test-multi-unrendered": Could not validate that a segment in your UI has instant navigation.
-
- This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.
-
-
- Dropped segments:
-   app/suspense-in-root/static/test-multi-unrendered/@sidebar/page.tsx
-   app/suspense-in-root/static/test-multi-unrendered/page.tsx

... truncated ...

pnpm test-start test/e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts (job)

instant validation - parallel slot configs > build > conditional slot rendering > errors when configured children slot is hidden, no cookies (DD)

Expand output

● instant validation - parallel slot configs › build › conditional slot rendering › errors when configured children slot is hidden, no cookies

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation - parallel slot configs build conditional slot rendering errors when configured children slot is hidden, no cookies 1`

- Snapshot  - 1
+ Received  + 0

@@ -1,10 +1,9 @@
  "Error: Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked": Could not validate that a segment in your UI has instant navigation.

  This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

-
  Dropped segment:
    app/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked/page.tsx

  Ways to fix this:
    - Render the dropped segment

  607 |           const result = await prerender(href)
  608 |           expect(extractBuildValidationError(result.cliOutput))
> 609 |             .toMatchInlineSnapshot(`
      |              ^
  610 |            "Error: Route "/suspense-in-root/parallel/conditional-breadcrumbs/show-only-breadcrumbs/unblocked": Could not validate that a segment in your UI has instant navigation.
  611 |
  612 |            This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

  at Object.toMatchInlineSnapshot (e2e/app-dir/instant-validation/instant-validation-parallel-slots.test.ts:609:14)

pnpm test-start test/e2e/app-dir/instant-validation/instant-validation.test.ts (job)

instant validation > build > multi-depth fallback deferral > surfaces deferred fallback when no shallower depth has a real error (DD)
instant validation > build > unrendered segment file reporting > reports the shallowest unrendered file, not the configured file (DD)
instant validation > build > unrendered segment file reporting > reports the boundary segment layout when multiple slots are dropped (DD)

Expand output

● instant validation › build › multi-depth fallback deferral › surfaces deferred fallback when no shallower depth has a real error

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation build multi-depth fallback deferral surfaces deferred fallback when no shallower depth has a real error 1`

- Snapshot  - 1
+ Received  + 0

@@ -1,10 +1,9 @@
  "Error: Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.

  This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

-
  Dropped segment:
    app/suspense-in-root/static/multi-depth-deferred-fallback/inner/page.tsx

  Ways to fix this:
    - Render the dropped segment

  3438 |           )
  3439 |           expect(extractBuildValidationError(result.cliOutput))
> 3440 |             .toMatchInlineSnapshot(`
       |              ^
  3441 |            "Error: Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.
  3442 |
  3443 |            This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

  at Object.toMatchInlineSnapshot (e2e/app-dir/instant-validation/instant-validation.test.ts:3440:14)

● instant validation › build › unrendered segment file reporting › reports the shallowest unrendered file, not the configured file

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation build unrendered segment file reporting reports the shallowest unrendered file, not the configured file 1`

- Snapshot  - 1
+ Received  + 0

@@ -1,10 +1,9 @@
  "Error: Route "/suspense-in-root/static/test-firstmod/inter/inner": Could not validate that a segment in your UI has instant navigation.

  This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

-
  Dropped segment:
    app/suspense-in-root/static/test-firstmod/inter/layout.tsx

  Ways to fix this:
    - Render the dropped segment

  3502 |           )
  3503 |           expect(extractBuildValidationError(result.cliOutput))
> 3504 |             .toMatchInlineSnapshot(`
       |              ^
  3505 |            "Error: Route "/suspense-in-root/static/test-firstmod/inter/inner": Could not validate that a segment in your UI has instant navigation.
  3506 |
  3507 |            This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

  at Object.toMatchInlineSnapshot (e2e/app-dir/instant-validation/instant-validation.test.ts:3504:14)

● instant validation › build › unrendered segment file reporting › reports the boundary segment layout when multiple slots are dropped

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `instant validation build unrendered segment file reporting reports the boundary segment layout when multiple slots are dropped 1`

- Snapshot  - 1
+ Received  + 0

@@ -1,10 +1,9 @@
  "Error: Route "/suspense-in-root/static/test-multi-unrendered": Could not validate that a segment in your UI has instant navigation.

  This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

-
  Dropped segments:
    app/suspense-in-root/static/test-multi-unrendered/@sidebar/page.tsx
    app/suspense-in-root/static/test-multi-unrendered/page.tsx

  Ways to fix this:

  3565 |           )
  3566 |           expect(extractBuildValidationError(result.cliOutput))
> 3567 |             .toMatchInlineSnapshot(`
       |              ^
  3568 |            "Error: Route "/suspense-in-root/static/test-multi-unrendered": Could not validate that a segment in your UI has instant navigation.
  3569 |
  3570 |            This segment was dropped from rendering. Issues that would prevent instant navigation will go undetected.

  at Object.toMatchInlineSnapshot (e2e/app-dir/instant-validation/instant-validation.test.ts:3567:14)

pnpm test-dev-turbo test/e2e/app-dir/instant-validation/instant-validation.test.ts (turbopack) (job)

instant validation > dev - client navigation > multi-depth fallback deferral > surfaces deferred fallback when no shallower depth has a real error ([DD](https://app.datadoghq.com/ci/test/runs?query=%40git.repository.id%3A%22github.com%2Fvercel%2Fnext.js%22+%40git.commit.head_sha%3A%22dcf251de0e3445434d0c4cbb3509d2c6a405ebe3%22+%40test.name%3A%22instant+validation+dev+

... truncated to fit in one GitHub comment ...

vercel · 2026-05-16T20:42:08Z

           {
             "code": "E1248",
-             "description": "Could not validate instant UI because an expected segment was not rendered.
+             "description": "Route "/suspense-in-root/static/multi-depth-deferred-fallback/inner": Could not validate that a segment in your UI has instant navigation.


Tests assert error code "E1248" but the source code now generates "E1253" due to a changed error message.

aurorascharff added 5 commits May 16, 2026 00:30

Redesign the "could not validate" instant error

ca89b0e

Adjust cards

595dafa

Update

4c6070e

Merge branch 'aurorascharff/instant-nav-error-clear' of github.com:ve…

f194bd7

…rcel/next.js into aurorascharff/redesign-unrendered-segment-overlay

Adjust error message

78cbf65

aurorascharff changed the title ~~Redesign unrendered-segment instant overlay~~ Redesign the unrendered-segment instant validation overlay May 15, 2026

aurorascharff added 2 commits May 16, 2026 01:21

Add page route info

d7f2c90

Add test

13023d9

aurorascharff added 3 commits May 16, 2026 21:14

Add "stacktrace" for the dropped segment

84f712d

Extract reusable component code-frame-shell

897010e

Clean up styles and wording

dcf251d

vercel Bot reviewed May 16, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign the unrendered-segment instant validation overlay#93879

Redesign the unrendered-segment instant validation overlay#93879
aurorascharff wants to merge 10 commits into
aurorascharff/instant-nav-error-clearfrom
aurorascharff/redesign-unrendered-segment-overlay

aurorascharff commented May 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 15, 2026 •

edited

Loading

Uh oh!

vercel Bot May 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

aurorascharff commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

Demo

How

Uh oh!

github-actions Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Failing test suites

Uh oh!

vercel Bot May 16, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

aurorascharff commented May 15, 2026 •

edited

Loading

github-actions Bot commented May 15, 2026 •

edited

Loading