All Components throw hydration warning when used with Next.js

[XYIAN]

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

1. Createa next.js app using the latest version by following the next.js docs link to docs
2. install prime react latest npm install primereact
3. use any component in a client component such as button for example my root page.tsx returns the following: <div> <Button onClick={()=>console.log('this button is from prime react')}</div>
4. run the app and check console the console - you will see the hydration error right away

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

[melloware]

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?

[XYIAN]

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