Server Warning: Each child in a list should have a unique "key" prop, when using route group folders with the parenthesis
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 2.2k
- PR merge metrics
- No merged PRs in 30d
Description
I noticed every time I would create a route group folder to then put the loading.tsx and page.tsx file in, I would get a warning in the browser console that states : "Server Warning: Each child in a list should have a unique "key" prop".
When I didn't use a route group folder, I wouldn't get the warning.
I was just wondering if this is anything to be concerned about for building apps with next.js? Is this something you can ignore or is it something to work on correcting because it could lead to problems when scaling out? What is the preferred solution?
For my current project repo, I decided not to use the route group folders so I would not encounter the issue. And everything still loads fine with all of the fallback skeletons.
Did anyone else notice this warning while building the app?
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the browser warning with a route group folder containing loading.tsx and page.tsx, then compare it with the equivalent non-grouped routes. Confirm whether the warning is caused by the route group setup and define done as removing the warning without breaking the fallback skeleton behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100