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
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

perhaps, just disable eslint for a while 🤣
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
@James4u why do you have fragment inside DialogTrigger????
Chinese AlligatorOP
to group elements
joulev
asChild requires that the component must have exactly one top level child having a ref prop
so yeah, fragments are not allowed there