Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue with PrimeReact Dialog on Next.js 15 and React 19 #7403

Closed
ARBS-23 opened this issue Nov 9, 2024 · 13 comments · Fixed by #7539
Closed

Issue with PrimeReact Dialog on Next.js 15 and React 19 #7403

ARBS-23 opened this issue Nov 9, 2024 · 13 comments · Fixed by #7539
Assignees
Labels
Component: NextJS NextJS related issue React 18/19 Issue or pull request is *only* related to React 18/19
Milestone

Comments

@ARBS-23
Copy link

ARBS-23 commented Nov 9, 2024

Describe the bug

While using the PrimeReact Dialog component in a project with Next.js 15 and React 19, the following warning message appears:

"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. Cannot update a component (HotReload) while rendering a different component (ForwardRef). To locate the bad setState() call inside ForwardRef, follow the stack trace as described in https://react.dev/link/setstate-in-render."

This issue seems to stem from changes in how ref is handled in React 19, potentially causing incompatibilities with PrimeReact’s Dialog component.

Reproducer

https://stackblitz.com/edit/vitejs-vite-pbvvz3

System Information

- React: 19.0.0-rc-66855b96-20241106
- Next.js: 15.0.3
- PrimeReact: 10.8.4
- TypeScript: 5.x
- Operating System: Windows 11

Steps to reproduce the behavior

  • Create a Next.js app with React 19 and PrimeReact 10.8.4.
  • Add the above code to render a simple Dialog component.
  • Click the button to show the dialog.
  • Observe the console warning message related to element.ref and HotReload issues.

Expected behavior

The Dialog component should render without any console warnings or errors, maintaining compatibility with React 19’s handling of ref as a regular prop.

@ARBS-23 ARBS-23 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 9, 2024
@melloware melloware added Component: NextJS NextJS related issue and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Nov 9, 2024
@DanielOberlechner
Copy link

got the exact same issue! Hope for a resolution...

@ameerhamza0403
Copy link

Facing same issue, Any update ?

@pandora-otto
Copy link

I'm also having same issue. I'd appreciate an update.

@ftsenguen
Copy link

Same issue, had to roll back to Next 14, React 18.

@simonwidjaja
Copy link

Same here

@IgnacioNCabrera
Copy link

Same issue.

@melloware melloware added the React 18/19 Issue or pull request is *only* related to React 18/19 label Dec 19, 2024
@DanielOberlechner
Copy link

Still no fix in sight?
Would like my website to be clean without any console errors how do you guys solve this problem?

@ashoshari
Copy link

Still no fix in sight? Would like my website to be clean without any console errors how do you guys solve this problem?

still waiting for fix

@melloware
Copy link
Member

Fixed for 10.8.6

@DanielOberlechner
Copy link

@melloware Thank you and a happy new Years Eve! :)

@melloware
Copy link
Member

I pinged PrimeTek to hopefully do a release with this fix soon!

@melloware
Copy link
Member

10.9.1 is released so everyone please try it.

@pandora-otto
Copy link

Just updated. Works great! Thank you team ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: NextJS NextJS related issue React 18/19 Issue or pull request is *only* related to React 18/19
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants