Warning: Expected server HTML to contain a matching <div> in <div>.

[jokokoloko]

Using this Offcanvas component within a Next.js (SSR) project produces an error.

The error:

Warning: Expected server HTML to contain a matching <div> in <div>.

The component itself works in both development and production but the error only appears in the browser console while in development, not in production.

Because this error only occurs in development, the answers within these links may help solve this issue or at least be related:

https://stackoverflow.com/questions/46865880/react-16-warning-expected-server-html-to-contain-a-matching-div-in-div-due?rq=1

https://stackoverflow.com/questions/46443652/react-16-warning-expected-server-html-to-contain-a-matching-div-in-body

I also noticed that you, @neosiae, referenced this issue already here:

https://github.com/facebook/react/issues/12615

[neosiae]

I will leave it as it is for now. I don't see a good solution.

[pdnellius]

For anyone else having this issue with Next.js this fixed it for me:

import dynamic from 'next/dynamic'
const DynamicOffCanvas = dynamic(() => import('react-aria-offcanvas'), { ssr: false })

[pdnellius]

I used a dynamic import to resolve this. See https://nextjs.org/docs/advanced-features/dynamic-import for more details.

On Mon, Jul 12, 2021 at 10:21 AM Reinny Almonte @.***> wrote:

Hey @pdnellius https://github.com/pdnellius , could you share more details about your workaround for Next.js?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/neosiae/react-aria-offcanvas/issues/11#issuecomment-878321389, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLHSJ6HNELYRLRPFS5PUN3TXL27FANCNFSM4IXMDDWA .

-- Pete Nellius @.*** 302.388.3454