require() issue on Next.js 13

[jamesvclements]

Description

Trying to render Notion pages in Next.js 13, running into this error:

Here's the code:

import { NotionAPI } from 'notion-client';
import { use } from 'react';
import { NotionRenderer } from 'react-notion-x';

const notion = new NotionAPI();

async function getNotionPage(id: string) {
    let recordMap = await notion.getPage(id);
    return recordMap;
}
export default function Page({ params }: { params: { id: string } }) {
    let recordMap = use(getNotionPage(params.id));
    console.log({ recordMap });
    return (
        <NotionRenderer
            recordMap={recordMap}
            fullPage={true}
            darkMode={false}
        />
    );
}

Here's the directory tree:

Notion Test Page ID

https://www.notion.so/witholdfriends/jm-sv-0bf617f4fbaf40ecbd58f7bceb29cfff

[transitive-bullshit]

You'll need to wrap the usage and import of NotionRenderer inside of a separate file that has use client at the top. This tells React 18 to treat it and all imports as part of a client component, as opposed to right now where it's a server component (which isn't supported).

This is a weird error, however, so it may be more than that, but this is definitely a problem w/ your example.

[jamesvclements]

@transitive-bullshit that fixed it!

'use client';

import { NotionRenderer } from 'react-notion-x';

export default function Renderer({ ...props }) {
    /* @ts-ignore */
    return <NotionRenderer {...props} />;
}

Does this mean using NotionRenderer loses the benefits of server-side rendering? I'm currently using super.so which I thought uses something like NotionRenderer under the hood to generate static pages.

[transitive-bullshit]

Does this mean using NotionRenderer loses the benefits of server-side rendering?

No. My understanding is that client components will still be rendered server-side — it just means that their JS will also be shipped to the client, whereas server-only components and their dependencies don't have to be shipped client-side. So it shouldn't be a degradation from the previous Next.js pages/ usage.

With that being said, however, I'm using Next.js 13 appDir in a project of mine at the moment, and as things stand right now, there are a lot of issues with the alpha since it's so new, so I wouldn't be surprised if some things aren't necessarily working as intended on the performance side of things.

I'm currently using super.so which I thought uses something like NotionRenderer under the hood to generate static pages.

Correct. Their rendering engine was developed around the same time as react-notion-x, and while I know they took a lot of inspiration from this project, and their approach is almost identical, their React rendering library is separate and proprietary.

[jamesvclements]

@transitive-bullshit awesome, that makes sense and is familiar from reading through the Next.js docs. Really appreciate your quick response and work on this project! I'll keep you posted if I discover anything else in this port to Next.js 13