I am in the process of practicing with nextjs and just made a brand-new app with the latest next.js (v14) which is working nicely. The UI library that I've enjoyed using is Prime React so after I made sure everything was working nicely I installed the latest Prime React(10.5). (I have no other libraries installed)
Links to codesandbox and github are below in the question section
When using Prime React components such as <Button/>
or <Sidebar/>
everything is working perfectly and looks nice but...
Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed
at body
at html
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:182:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:538:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11)
at RSCComponent
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)
<React.Fragment>
around the components where this is used but it does not fix the warningDoes anyone know how to solve this issue? Or if anyone else has successfully used Next.js(14) and PrimeReact(10.5) together with no warnings, what steps have you taken to remove or satisfy this issue?
Here is a link to my git repo: Github Link to the specific branch
Here is a link to my sandbox: CodeSandbox.io Link
Thank you for any help in advance...I know that everything works fine with the warning but I like to have no errors and no warnings in my code just in-case it could cause an issue down the line
Disabling this was not enough, after I fully uninstalled Grammarly I no longer received the issue and found that it was because Grammarly adds props/attributes to the body tag.
If this is happening to you make sure you completely remove Grammarly and related extensions to solve it.
Special thanks to Snehil Shah for helping me figure this out