I am using @dnd-kit/core library for Drag & drop functionality, but I am getting this particular warning every time when the component mounts.
Warning: Prop `aria-describedby` did not match. Server: "DndDescribedBy-1" Client: "DndDescribedBy-2" at div at th at _c10 (webpack-internal:///(app-pages-browser)/./src/components/ui/table.tsx:97:11) at DraggableTableHeader (webpack-internal:///(app-pages-browser)/./src/components/data-table/data-table.tsx:116:11) at SortableContext (webpack-internal:///(app-pages-browser)/./node_modules/@dnd-kit/sortable/dist/sortable.esm.js:312:5) at tr at _c8 (webpack-internal:///(app-pages-browser)/./src/components/ui/table.tsx:83:11) at thead at _c2 (webpack-internal:///(app-pages-browser)/./src/components/ui/table.tsx:41:11) at table at div at _c (webpack-internal:///(app-pages-browser)/./src/components/ui/table.tsx:20:11) at div at div at DndContext (webpack-internal:///(app-pages-browser)/./node_modules/@dnd-kit/core/dist/core.esm.js:2864:5) at DataTable (webpack-internal:///(app-pages-browser)/./src/components/data-table/data-table.tsx:204:11) at div at div at div at PaymentsPage (Server) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:346:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:367:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82: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 LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:346:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:367:11) at body at html at RootLayout (Server) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82: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/app/ReactDevOverlay.js:87:9) at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11) at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:577:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11) window.console.error @ app-index.js:33 console.error @ hydration-error-info.js:63 printWarning @ react-dom.development.js:94 error @ react-dom.development.js:68 warnForPropDifference @ react-dom.development.js:32715 diffHydratedGenericElement @ react-dom.development.js:34933 diffHydratedProperties @ react-dom.development.js:35113 hydrateInstance @ react-dom.development.js:36127 prepareToHydrateHostInstance @ react-dom.development.js:7246 completeWork @ react-dom.development.js:19769 completeUnitOfWork @ react-dom.development.js:25963 performUnitOfWork @ react-dom.development.js:25759 workLoopConcurrent @ react-dom.development.js:25734 renderRootConcurrent @ react-dom.development.js:25690 performConcurrentWorkOnRoot @ react-dom.development.js:24504 workLoop @ scheduler.development.js:256 flushWork @ scheduler.development.js:225 performWorkUntilDeadline @ scheduler.development.js:534 Show 18 more frames Show less
I don't know if this is Next.js issue (hydration), or a library specific issue. How do I remove this warning?
I tried implementing the drag & drop feature (it works fine), but I get this warning everytime which I want to get rid of.
This is a Next.js SSR issue. There are basically two ways to fix this:
You can check out the linked issue in general to get more information on why this is happening.