Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Warning with Next.js 10.2.0 and SSR

See original GitHub issue

First, thank you for this great library! Unfortunately, I get a new warning after I upgraded to the latest Next.js version (v10.2.0) because of the server-side rendering in development mode: Warning: Prop 'aria-describedby' did not match. Server: "DndDescribedBy-2" Client: "DndDescribedBy-1" (full traceback below). It seems that the server-side ID increases each time I refresh the page (maybe because of the new stuff the Next.js team added to improve startup times).

I see that the ID is generated automatically with useUniqueId and without allowing to set it manually. A possible way to fix this I guess would be an optional id prop for the DndContext and pass it to useUniqueId to set the draggableDescribedById manually. What do you think?

Full traceback:

Warning: Prop `aria-describedby` did not match. Server: "DndDescribedBy-2" Client: "DndDescribedBy-1"
    at div
    at SortableItem (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateName%5D.js?ts=1621372663479:308602:17)
    at SortableContext (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateName%5D.js?ts=1621372663479:5647:3)
    at DndContext (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateName%5D.js?ts=1621372663479:4498:3)
    at nav
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:4155:66
    at List (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:25308:79)
    at div
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:4155:66
    at Paper (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:30453:80)
    at SectionList (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateName%5D.js?ts=1621372663479:307579:86)
    at div
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:4155:66
    at Box (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:10205:99)
    at form
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:4155:66
    at Box (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:10205:99)
    at FormProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:125662:147)
    at StructureForm (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateName%5D.js?ts=1621372663479:308867:23)
    at div
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:4155:66
    at Box (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:10205:99)
    at StructurePanel (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateName%5D.js?ts=1621372663479:309086:114)
    at div
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:4155:66
    at Box (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:10205:99)
    at TransformerRegistry (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateName%5D.js?ts=1621372663479:309831:23)
    at ModuleRegistry (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateName%5D.js?ts=1621372663479:303510:23)
    at StructuredReportContent
    at TemplatePage
    at WithSuperJSON (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateName%5D.js?ts=1621372663479:324597:42)
    at BlitzInnerRoot (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:1300:5)
    at main
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:4155:66
    at Box (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:10205:99)
    at div
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:4155:66
    at Container (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:15860:80)
    at div
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:4155:66
    at Box (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:10205:99)
    at Layout (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateName%5D.js?ts=1621372663479:311278:20)
    at Suspense
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:125435:37)
    at InnerThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:50374:67)
    at ThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:54474:5)
    at ThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:50394:5)
    at SwitchableThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:63646:23)
    at LocalizationProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:54316:5)
    at LocalizationProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:63404:23)
    at App (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:66009:24)
    at AppWithStructuredReportTranslations (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:64385:28)
    at AppWithSiteTranslations (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:64235:28)
    at Provider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:131913:20)
    at AppWithRedux (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:64099:32)
    at Hydrate (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:131181:23)
    at QueryClientProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:131256:21)
    at BlitzProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:1079:21)
    at BlitzOuterRoot (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621372663479:1331:34)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1621372663479:142:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1621372663479:245:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1621372663479:7839:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1621372663479:8328:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1621372663479:8464:25)

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:9 (4 by maintainers)

Top GitHub Comments

9reactions

medihackcommented, Jun 3, 2021

It is fixed and released with v3.0.4. Make sure you have the right version in package.json. And don’t forget to give DndContext an id (required to fix this issue with ssr).

0reactions

DiegoMcDipstercommented, Jun 4, 2021

Fantastic! It was the id that I was missing. It’s working a treat now! Thanks again!

Top Results From Across the Web

Slower Response Times when updating from 10.0.7 to 10.2.0 ...

Render times should not increase when updating next.js. To Reproduce. Unfortunately it's a closed-source project. If you need more detailed ...

Why am I seeing these warnings in next js app? - Stack Overflow

I am creating a web app with nextjs and tailwind css. When I am running or building the app I am getting these...

jss-invalid-warning-during-SSR - CodeSandbox

Activating extension 'vscode.typescript-language-features' failed: Could not find bundled tsserver.js.

Nextjs sdk - user validity - Auth0 Community

I'm struggling a bit to validate the user status, I'm using the nextjs sdk, ... to avoid this issue I'm validating the user...

eslint-config-next 11.1.0 on Node.js NPM - NewReleases.io

Affected: Users of Next.js between 10.0.5 and 10.2.0 ... [ESLint] Adds --max-warnings flag to next lint : #26697 ... [examples] Fix ssr-caching example....