Next.js Discord

Discord Forum

Upgrade to Next 15: React.Fragment can only have `key` and `children`

Answered
Chinese Alligator posted this in #help-forum
Open in Discord
Avatar
Chinese AlligatorOP
Not sure how to fix this, may need to roll back upgrade:
Invalid prop `type` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props. intercept-console-error.ts:40:25

Unable to determine where the error is coming from. I do not have any React.Fragment usage in my codebase, perhaps a library is causing this?

UPDATE: i think its ShadCND issue, its happening on page that has Dialog
Answered by Chinese Alligator
Issue resolved, cause found to be using an empty tag inside <DialogTrigger>
<DialogTrigger asChild>
  <></> // bad
</DialogTrigger>


<DialogTrigger asChild>
  <div></div> // not bad
</DialogTrigger>
View full answer

7 Replies

Avatar
James4u
okay then it must be from a library
perhaps, just disable eslint for a while 🤣
Avatar
Chinese AlligatorOP
Issue resolved, cause found to be using an empty tag inside <DialogTrigger>
<DialogTrigger asChild>
  <></> // bad
</DialogTrigger>


<DialogTrigger asChild>
  <div></div> // not bad
</DialogTrigger>
Answer
Avatar
James4u
why do you have fragment inside DialogTrigger????
Avatar
Chinese AlligatorOP
to group elements
Avatar
joulev
asChild requires that the component must have exactly one top level child having a ref prop
so yeah, fragments are not allowed there