Hydration issue on Next.js 13

[jamesvclements]

Description

Seems like certain Notion blocks are causing a hydration issue, ~~but I can't (yet) tell which one(s)~~. Update: it seems to be the Code block and Collection blocks. I have a page that renders fine, but I'm trying to use Super's Template Starter page, and that has issues.

I removed all the components that were unsupported and added the third-party components but even without any warnings from the library the hydration issue is still there.

Page without issues Page w/ issues

Renderer Code:

'use client';

import { ComponentPropsWithoutRef } from 'react';
import { NotionRenderer } from 'react-notion-x';
import { Collection } from 'react-notion-x/build/third-party/collection';
import { Code } from 'react-notion-x/build/third-party/code';
import { Equation } from 'react-notion-x/build/third-party/equation';
import TweetEmbed from 'react-tweet-embed';
import Image from 'next/image';
import Link from 'next/link';

export default function NotionRendererDefault(
    props: ComponentPropsWithoutRef<typeof NotionRenderer>
) {
    return (
        <NotionRenderer
            {...props}
            components={{
                Collection,
                nextImage: Image,
                nextLink: Link,
                ...props.components,
            }}
        />
    );
}

const Tweet = ({ id }: { id: string }) => {
    return <TweetEmbed tweetId={id} />
  }

export function NotionRendererForPosts(
    props: ComponentPropsWithoutRef<typeof NotionRenderer>
) {
    return (
        <NotionRenderer
            {...props}
            components={{
                nextLink: Link,
                nextImage: Image,
                Collection: Collection,
                Code: Code,
                Equation: Equation,
                Tweet: Tweet,
            }}
        />
    );
}

[jamesvclements]

Looks like the issue is with notion-code:

[jamesvclements]

Found this similar issue

[jamesvclements]

Removing the code block, there's another hydration issue regarding style in the collection block:

[jamesvclements]

Update — removing the Code Block and Collection Blocks stops the hydration errors

[transitive-bullshit]

Not sure if you're using it, but I don't think next/dynamic works with appDir.

In general, appDir is really pre-alpha at the moment imho, and I would recommend staying away from it.

I was also running into random React hydration errors working on an unrelated demo app: https://github.com/vercel/next.js/issues/43159

[FranciscoMoretti]

I'm also hitting this error with Collection Blocks displaying a list. I'm not using the appDir.

[kjs104901]

In my case, rendering a page that is written in a single table(Collection) which has a icon causes the problem.

The message disappears when I do one of the below

• Remove the icon of table
• Turn off the fullPage option
• Not render Collection (rendering result is a empty page)

[stimw]

Looks like the issue is with notion-code:

same issue in Next.js 13

[6unpk]

I think it appears on next.js 13 version. when i downgraded to next.js 12, it works.