Closed XYIAN closed 6 months ago
Do you get the same warning using one of the preconfigured PrimeReact starter projects?
See: https://github.com/primefaces/primereact-examples
I don't remember seeing this warning with any of those projects?
After a lot of testing and research I found that this is caused by some chrome extensions, after uninstalling all chrome extensions this issue no longer occurred.
Some extensions add attributes to the body which is why next.js throws the warning
Describe the bug
Using React, Typescript and NextJs 14 with Prime React
I just recently created a next.js app and installed prime react (all with their most recent versions) but I am constantly receiving a warning on first load when using prime react components. This is an issue using ANY prime react component, for example if I have an empty page or a page with basic HTML then there is no issue, as soon as I add a prime react button then this warning appears: Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed
Reproducer
https://codesandbox.io/p/github/XYIAN/first-next-proj/main?import=true&layout=%257B%2522sidebarPanel%2522%253A%2522GIT%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltlx7cdo00063b6kt9bf37cn%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltlx7cdo00023b6kblsroz2h%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltlx7cdo00043b6kmztibebl%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltlx7cdo00053b6k8il3jql6%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltlx7cdo00023b6kblsroz2h%2522%253A%257B%2522id%2522%253A%2522cltlx7cdo00023b6kblsroz2h%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522cltlx7cdo00053b6k8il3jql6%2522%253A%257B%2522id%2522%253A%2522cltlx7cdo00053b6k8il3jql6%2522%252C%2522activeTabId%2522%253A%2522cltlxbec300jy3b6koz92sorx%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522cltlxbec300jy3b6koz92sorx%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522cltlx7cdo00043b6kmztibebl%2522%253A%257B%2522id%2522%253A%2522cltlx7cdo00043b6kmztibebl%2522%252C%2522activeTabId%2522%253A%2522cltlx7df4004p3b6kazhrfvvl%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltlx7cdo00033b6kqu7h52n4%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522cltlx7d6l001hdai5aq0iggoa%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522cltlx7df4004p3b6kazhrfvvl%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522CSB_RUN_OUTSIDE_CONTAINER%253D1%2520devcontainer%2520templates%2520apply%2520--template-id%2520%255C%2522ghcr.io%252Fdevcontainers%252Ftemplates%252Ftypescript-node%255C%2522%2520--template-args%2520%27%257B%257D%27%2520--features%2520%27%255B%255D%27%2522%252C%2522id%2522%253A%2522cltlx9wbl00793b6kj8419tq4%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
PrimeReact version
10.5.1
React version
18.x
Language
TypeScript
Build / Runtime
Next.js
Browser(s)
Chrome
Steps to reproduce the behavior
npm install primereact
<div> <Button onClick={()=>console.log('this button is from prime react')}</div>
Expected behavior
The components are functioning as expected however there is an unexpected warning that seems to be an HTML hydration issue - I only get this when trying to use prime react with the next.js framework