Next 16 Portals does not replace contents with cacheComponents

[khuezy]

Link to the code that reproduces this issue

https://github.com/khuezy/next16-portalbug

To Reproduce

Repro steps are in the README of the link above.

1. npm run dev
2. go to localhost:3000
3. Click on 'a', see the portal at the top
4. Click on 'b', see the portal at the top, it does not replace A's portal.

Current vs. Expected behavior

When using React Portals, I expect the contents of the portal to be replaced with the new content.
This works on Next 15 and below but is broken in Next 16

Provide environment information

N/A

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

cacheComponents

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

next dev (local), next start (local)

Additional context

No response

[icyJoseph]

Mmm also introduced in Next.js 16.0.0-canary.17 it seems

[icyJoseph]

Can you help me verify something, if you replace the wrapping div's for a Fragment <></>, it works right? if you only do it in one page, it kinda works, but then the other gets stuck

[ceolinwill]

Mmm also introduced in Next.js 16.0.0-canary.17 it seems

Yeah, this seems the same issue as #85218

But the Fragment workaround doesn't seem to work for me

[khuezy]

Can you help me verify something, if you replace the wrapping div's for a Fragment <></>, it works right? if you only do it in one page, it kinda works, but then the other gets stuck

Hey @icyJoseph thanks for taking a look! Same here, wrapping a <Fragment> or <> still doesn't work (in the Menu.tsx file)

Edit: oh you mean replacing the div with <> in the a/page.tsx ... that works but if you include any tag in the tree, it breaks.

Edit 2: from @icyJoseph 's suggestion, the workaround is wrapping the component in a Fragment:

<>
   <div>Your main stuff goes here</div>
 {createPortal(....)} // the createPortal must not be wrapped in any Tag
</>

[icyJoseph]

It's cuz the Activity wraps the route, and there's some edge case there with Fragments. Gonna try to document this from Next.js' side but it looks like React can't necessarily also apply the hidden behavior to portals contained within the tree.

The Fragment wouldn't be a solution either, as it doesn't work for #85218 for example, because the tree can just be a single node under the fragment and still break. Even if it did, it'd be unrealistic, code out of devs control or nested portals would still have the issue.

[khuezy]

You're right, this only works in the most trivial case of a single parent. But almost all apps have much deeper trees which the workaround doesn't address.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.