Why am I getting this error, "Attempted import error: 'useRef' is not exported from 'react' (imported as 'React5')."

[Geuni620]

Description

Notion Test Page ID

---

Hi there.

Recently, I'm trying to create a blog using Notion.

I want to use react-notion-x, the app directory next.js.

• node version: 18.15.0
• next.js: 13.3.0

1. Does next.js not support 'app directory'?
2. if not, is it possible to use react-notion-x in the pages folder to use only the part related to notion and the rest in the app folder?
3. If you have another way to do it, or I'm missing something, please let me know.

Thank you in advance. 🙇‍♂️

[Geuni620]

It turns out it was just because I didn't include 'use client'. 🥲

[0xPT]

How did you get this to work? Using "use client" throws Module not found: Can't resolve 'dns' and not using "use client" throws the error you received.. Using Next 13.4.1

[Geuni620]

Hello @0xPT

I can't remember exactly because I solved the previous error message, but I just added app/[slug]/[pageId]/page.tsx

// app/[slug]/[pageId]/page.tsx
const Page = async ({ params: { pageId } }: { params: { pageId: string } }) => {
  const notion = new NotionAPI();
  const recordMap = await notion.getPage(pageId);

  return (
      <NotionPage
        recordMap={recordMap}
        rootDomain={rootDomain}
        previewImagesEnabled={previewImagesEnabled}
      />
  );
};

export default Page;

This is the server component. But when I use 'use client' here, I get the error you are seeing.

However, no error occurred when 'use client' was attached within NotionPage.

// NotionPage.tsx

'use client';

import dynamic from 'next/dynamic';
import Link from 'next/link';
import { ExtendedRecordMap } from 'notion-types';
import { getPageTitle } from 'notion-utils';
import { NotionRenderer } from 'react-notion-x';

export const NotionPage = ({
  recordMap,
  previewImagesEnabled,
  rootPageId,
  rootDomain,
}: NotionPageProps) => {
  if (!recordMap) {
    return null;
  }

  return (
    <>
      <NotionRenderer
        recordMap={recordMap}
        rootDomain={rootDomain}
        rootPageId={rootPageId}
        fullPage={false}
        previewImages={previewImagesEnabled}
        components={{
          nextLink: Link,
          Code,
          Collection,
          Equation,
          Pdf,
          Modal,
        }}
      />
    </>
  );
};

In other words, I think it can be solved by attaching the use client with the server component and the client component well separated.

Sorry for not being able to help.

[0xPT]

@Geuni620 my friend I appreciate the time you took to reply to me. Your recommendation resolved my problem.

Thanks so much!

[vader1359]

@Geuni620 Hello, do you some how get the next/image or next-cloudinary supported in the new AppRouter? The components attribute in NotionRenderer works well in PageRouter but it fetch the raw data link in the new AppRouter.