Skip to content

Commit d415f32

Browse files
committed
Fix missing keys in Fragments in arrays
1 parent abeabe4 commit d415f32

File tree

2 files changed

+8
-6
lines changed

2 files changed

+8
-6
lines changed

packages/next/src/server/app-render/app-render.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -522,11 +522,11 @@ async function getRSCPayload(
522522
typeof varyHeader === 'string' && varyHeader.includes(NEXT_URL)
523523

524524
const initialHead = (
525-
<>
525+
<React.Fragment key="initial-head">
526526
<NonIndex ctx={ctx} />
527527
{/* Adding requestId as react key to make metadata remount for each render */}
528528
<MetadataTree key={ctx.requestId} />
529-
</>
529+
</React.Fragment>
530530
)
531531

532532
return {

packages/next/src/server/app-render/create-component-tree.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@ function errorMissingDefaultExport(pagePath: string, convention: string) {
5454
)
5555
}
5656

57+
const cacheNodeKey = 'cache-node'
58+
5759
async function createComponentTreeInternal({
5860
createSegmentPath,
5961
loaderTree: tree,
@@ -500,10 +502,10 @@ async function createComponentTreeInternal({
500502
// identical even without it. But maybe there's some findDOMNode-related
501503
// reason that I'm not aware of, so I'm leaving it as-is out of extreme
502504
// caution, for now.
503-
<>
505+
<React.Fragment key={cacheNodeKey}>
504506
{layerAssets}
505507
{parallelRouteProps.children}
506-
</>,
508+
</React.Fragment>,
507509
loadingData,
508510
]
509511
}
@@ -618,7 +620,7 @@ async function createComponentTreeInternal({
618620
return [
619621
actualSegment,
620622
parallelRouteCacheNodeSeedData,
621-
<>
623+
<React.Fragment key={cacheNodeKey}>
622624
{segmentElement}
623625
{/* This null is currently critical. The wrapped Component can render null and if there was not fragment
624626
surrounding it this would look like a pending tree data state on the client which will cause an error
@@ -629,7 +631,7 @@ async function createComponentTreeInternal({
629631
null it will look like `null` (the array is elided) and this is what confuses the client router.
630632
TODO-APP update router to use a Symbol for partial tree detection */}
631633
{null}
632-
</>,
634+
</React.Fragment>,
633635
loadingData,
634636
]
635637
}

0 commit comments

Comments
 (0)