search

nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.3k stars 1.37k forks source link

[BUG] - Incompatibilities with newer Next.js canaries. #3021

Open jimapl opened 3 months ago

jimapl commented 3 months ago

NextUI Version

2.3.6

Describe the bug

seems nextui is not working with the newer next.js canaries.

PopoverTrigger throws

"Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead."

When any variable or children is present within, even a div. Only flat string are accepted See no issues on this topic on Github atm. But expect this will be a massive dealbreaker for many Works in 14.2.3, breaks from canary 66

Scherm­afbeelding 2024-05-18 om 14 44 21

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Install latest nextjs canary, for example. 14.3.0-canary-70.

Use a popover, tooltip or any other portal components where children are objects or components.

Expected behavior

It to work.

Screenshots or Videos

Scherm­afbeelding 2024-05-18 om 14 44 21

Operating System Version

Mac

Browser

Chrome

linear[bot] commented 3 months ago

ENG-848 [BUG] - Incompatibilities with newer Next.js canaries.

wingkwong commented 3 months ago

The nextjs canary version requires react 19 rc, which seems react-aria currently doesn't support yet.

amauryfischer commented 2 months ago

yeah it's going on : https://github.com/adobe/react-spectrum/pull/6437

lostfutures commented 2 months ago

CleanShot 2024-06-20 at 03 28 34@2x react-spectrum just merged react 19 support @wingkwong

Minisaints commented 2 months ago

I'm also experiencing this issue on the latest RC versions. I tracked my issue down to the Dropdown. Even using the basic example Dropdown code in the docs throws it.

⨯ Internal error: Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

"@nextui-org/react": "^2.4.2", "next": "^15.0.0-rc.0", "react": "^19.0.0-rc-6fb39ec9e9-20240621",

jimmailcamp commented 2 months ago

Yeah, only when you return a plain string it works. Any objects throws this. also the case for tooltip/popover and any other component basicly.

zerosoul commented 2 months ago

any progress?

victorkardel commented 2 months ago

up, any progress?

wingkwong commented 2 months ago

This issue has been marked as on hold. Here's the reasons.

  1. NextJS 15 RC is using React 19 RC. Just FYI, recently there is a heated discussion about sibling components of suspended components causing performance issue. React team is planning to hold the release until they find the good fix.
  2. react-spectrum has merged the related changes to support 19 but it hasn't been GA yet. We're still waiting for the release and we're NOT using a nightly version in our production release. We may consider to have a beta version (probably would be introduced after v2.5.0) so that you may optionally use it at your own risk.
  3. Please note that supporting a major version upgrade is not just like bumping the version and everything will be working fine. There's lots of things to evaluate and consider. It could potentially break lots of logics and require effort to fix them. Please be patient and eventually we will support it, when everything is ready.

I'm going to lock this conversation and will unlock it once we got some actual updates.