NotionX / react-notion-x

Fast and accurate React renderer for Notion. TS batteries included. ⚡️
https://react-notion-x-demo.transitivebullsh.it
MIT License
4.69k stars 544 forks source link

Cannot read properties of undefined (reading 'prototype') error with react-notion-x #525

Closed allail-qadrillah closed 9 months ago

allail-qadrillah commented 9 months ago

Description

I am trying to render data from Notion using the react-notion-x library in my Next.js project. However, I am getting an error that says "Cannot read properties of undefined (reading 'prototype')". This error occurs when the react-notion-x library is loaded.

Steps to Reproduce

  1. Install the react-notion-x library in a Next.js project.
  2. Use the NotionRenderer component to render data from a Notion page.
  3. Run the project and observe the error that occurs.

Expected Behavior

The NotionRenderer component should render the data from the Notion page without any errors.

Actual Behavior

The following error occurs when the react-notion-x library is loaded:

Unhandled Runtime Error
Error: Cannot read properties of undefined (reading 'prototype')

Notion Test Page ID

i got from the documentation 067dd719a912471ea9a3ac10710e7fdf

Screenshots

image

Additional Information

I have tried reinstalling the react-notion-x library and updating it to the latest version, but the error still occurs. I have also checked that I am providing all the required props to the NotionRenderer component and that the data structure is correct.

this is the code I used

import Container from "@/components/elements/Container"
import PageHeading from "@/components/elements/PageHeading"
import BackButton from "@/components/elements/BackButton"
import { NotionRenderer } from "react-notion-x"
import { NotionAPI } from 'notion-client'

const notion = new NotionAPI()

export default async function ProjectDetailPage({ params }) {

  const recordMap = await notion.getPage('067dd719a912471ea9a3ac10710e7fdf')
  console.log(recordMap)

  return (
    <>
      <Container>
        <BackButton />
        <PageHeading title="" />
        <NotionRenderer recordMap={recordMap} fullPage={true} darkMode={false} />
      </Container>
    </>
  )
}

and these are the depedencies used

  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@jridgewell/sourcemap-codec": "^1.4.15",
    "@notionhq/client": "^2.2.13",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tooltip": "^1.0.7",
    "aos": "^2.3.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
    "framer-motion": "^10.16.4",
    "lucide-react": "^0.279.0",
    "next": "^13.5.4",
    "next-themes": "^0.2.1",
    "nextjs-toploader": "^1.4.2",
    "node-fetch": "^3.3.2",
    "notion-client": "^6.16.0",
    "react": "latest",
    "react-dom": "latest",
    "react-icons": "^4.11.0",
    "react-notion-x": "^6.15.6",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7",
    "usehooks-ts": "^2.9.1",
    "zustand": "^4.4.1"
  },
  "devDependencies": {
    "autoprefixer": "latest",
    "eslint": "latest",
    "eslint-config-next": "latest",
    "postcss": "latest",
    "tailwindcss": "latest"
  }
Bruslaan commented 9 months ago

same error

alfonsograziano commented 9 months ago

Same issue here :/ Here how to solve it: https://github.com/NotionX/react-notion-x/issues/511