Getting 'prototype' undefined property error when using notion-react-x library

Other Questions Notion
1

I’m working on a Next.js app and trying to display content from Notion pages using the notion-react-x package. But I keep getting this weird error message that says it can’t read the ‘prototype’ property because something is undefined.

What I’m trying to do:

  • Set up the notion-react-x library in my Next.js app
  • Use the NotionPage component to show content from Notion
  • Make it work without any crashes

What actually happens:
I get this runtime error:

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

My code setup:

import Layout from "@/components/shared/Layout"
import Header from "@/components/shared/Header"
import GoBackLink from "@/components/shared/GoBackLink"
import { NotionPage } from "notion-react-x"
import { NotionClient } from 'notion-api-client'

const client = new NotionClient()

export default async function BlogPost({ params }) {
  
  const pageData = await client.getPage('067dd719a912471ea9a3ac10710e7fdf')
  console.log(pageData)
  
  return (
    <>
      <Layout>
        <GoBackLink />
        <Header title="" />
        <NotionPage recordMap={pageData} fullPage={true} darkMode={false} />
      </Layout>
    </>
  )
}

Package versions I’m using:

{
  "notion-api-client": "^6.16.0",
  "notion-react-x": "^6.15.6",
  "next": "^13.5.4",
  "react": "latest",
  "react-dom": "latest"
}

I already tried removing and installing the package again, plus updating to newer versions. I double checked that I’m passing the right props to the component too. Still getting the same error though.

Has anyone run into this before? What am I missing here?

2

Been there. Notion libraries always break with SSR prototype errors.

Skip the headache entirely - don’t wrestle with package versions and dynamic imports. Just set up automation that pulls your Notion content and transforms it into clean data that actually works with Next.js.

I use a workflow that hits the Notion API, processes everything, and spits out content that renders without prototype issues. No more SSR compatibility fights or version hunting.

Build the same flow and auto-sync your Notion content when it changes. Way more reliable than libraries that break every Next.js update.

Check it out: https://latenode.com

3

Hit this same error a few months ago with notion-react-x. It’s a compatibility issue between the library version and your Next.js setup - the library tries to use browser APIs that don’t exist during server-side rendering. Fixed it by downgrading notion-react-x to 6.13.0 and matching the notion-api-client version. Newer versions have a breaking change that triggers this prototype error. Also make sure your page component has the client component marker if you’re using Next.js 13’s app directory. The error happens when the library accesses DOM objects during initial render.

4

Had this exact problem building a docs site with notion-react-x last year. The library’s trying to access prototype methods on objects that aren’t properly constructed yet - usually happens during hydration mismatches between server and client.

I fixed it by switching from notion-api-client to @notionhq/client for data fetching, then using notion-to-md to convert before passing to notion-react-x. Prototype error vanished because the data structure was way more predictable. Also check if your Notion page ID actually returns valid data - malformed API responses can break the library when it tries to build components. Your console.log should show a proper recordMap with blocks and other properties.

5

looks like a client/server rendering issue with next.js. try wrapping your NotionPage in a dynamic import and set ssr to false: const NotionPage = dynamic(() => import('notion-react-x').then(mod => mod.NotionPage), { ssr: false }). a lot of Notion libs mess up with ssr.