[Next.js] Hydration failed

[dvlden]

I have a problem using this lib in the latest Next.js and latest React.js.

This is the error I'm getting:

Warning: Expected server HTML to contain a matching <div> in <div>.
div
div
MasonryScroller@webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/masonic/dist/module/masonry-scroller.js:24:10
Masonry@webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/masonic/dist/module/masonry.js:32:59

Followed by:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

Not sure what I can do to fix this. I searched through issues and nobody seemed to complain about using it on Next/SSR.

[jaredLunde]

It is not "fixable" in the sense that the server has no viewport. You will not be able to work around this so you basically can either ignore it or not use a masonry layout.

[giavinh79]

You can do something like this to avoid the error on Next.js - vercel/next.js#35773 (comment)

[orlando-guy]

I had the same issue, here is how I fixed that:

  'use client'

  export default function App () {
     const [isServerSide, setIsServerSide] = React.useState(true)

    React.useEffect(() => {
        setIsServerSide(false)
    }, [])

    if (isServerSide) {
        return
    }

  // the rest of your code
 }