vercel / vercel/next.js

SegmentViewNode produces "unique key" error when passing shared object reference

Open
#90,099 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

SegmentViewNode produces "unique key" error when passing shared object reference:

## Error Type
Console Error

## Error Message
Each child in a list should have a unique "key" prop.

Check the top-level render call using <SegmentViewNode>. It was passed a child from Page. See https://react.dev/link/warning-keys for more information.

Next.js version: 16.2.0-canary.48 (Turbopack)
Link to the code that reproduces this issue

https://github.com/ceolinwill/nextjs-cache-segmentview-key

To Reproduce

When the same object reference (containing a non-empty array property) is passed in multiple positions of the props to a client component from a "use cache" page, React produces a "unique key" error.

Minimal reproduction

app/page.tsx

"use cache";

import { Display } from "./client";

export default async function Page() {
  const item = { id: "1", name: "Apple", tags: ["fruit"] };
  return <Display item={item} items={[item]} />;
}

app/client.tsx

"use client";

type Item = { id: string; name: string; tags: string[] };

export function Display({ item, items }: { item: Item; items: Item[] }) {
  return (
    <p>
      {item.name}: {items.length} items
    </p>
  );
}
Steps
  1. Run npm run dev in the terminal
  2. Open the browser and navigate to http://localhost:3000
Current vs. Expected behavior

Current Behavior

React produces a "unique key" error at the SegmentViewNode boundary.

Expected Behavior

No React warning. The data is plain props, not a list of React elements. There is no list rendering at the page level.

Provide environment information
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.3.0: Wed Jan 28 20:48:41 PST 2026; root:xnu-12377.81.4~5/RELEASE_ARM64_T6041
  Available memory (MB): 65536
  Available CPU cores: 16
Binaries:
  Node: 24.12.0
  npm: 11.6.2
  Yarn: N/A
  pnpm: 10.28.2
Relevant Packages:
  next: 16.2.0-canary.48 // Latest available version is detected (16.2.0-canary.48).
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Which area(s) are affected? (Select all that apply)

cacheComponents

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context
Workaround

Deep-copy the shared objects before passing them through the "use cache" boundary:

return (
  <Display item={{ ...item, tags: [...item.tags] }} items={[{ ...item, tags: [...item.tags] }]} />
);

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproduction's app/page.tsx and app/client.tsx, then run npm run dev and confirm the warning at the SegmentViewNode boundary. Trace how the shared object and its non-empty tags array cross the "use cache" boundary. Done means the reproduction no longer emits the unique-key warning without requiring the deep-copy workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
backend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.