NotionX / NotionX/react-notion-x
NotionRenderer not rendering components properly
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5.4k
- Forks
- 645
- PR merge metrics
- No merged PRs in 30d
Description
Hello there,
I'm trying to implement Search using react-notion-x as shown in the Next.js example.
I've copied most of the code over and get no errors, when I try to open the Search Modal, I get the following warning:
Warning: using empty component "Modal" (you should override this in NotionRenderer.components)
Below is the code for my NotionPage.tsx, I'm importing Modal using dynamic() and adding it to the components of the NotionRenderer. I get the same warning if I directly import the Modal without using dynamic(). When I click on the Search component, it executes the search function with an empty string and returns some results but the Modal never shows up!
Does anyone know why that is and how I can fix it?
Is there a way to style and format the
component with my own HTML, I'd like to use a Chakra Ui component for it?Thank you very much!
Notion Test Page ID
rootNotionPageId = 'a1c4c4eb2a8842e9a53a8d642b5da034'
NotionPage.tsx
import { useMemo } from 'react'
import Head from 'next/head'
import type { ExtendedRecordMap } from 'notion-types'
import { getPageTitle } from 'notion-utils'
import { NotionRenderer } from 'react-notion-x'
import Link from 'next/link'
import Image from 'next/image'
import dynamic from 'next/dynamic'
import { searchNotion } from '@/helper/notion/search-notion'
const Equation = dynamic(() =>
import('react-notion-x/build/third-party/equation').then((m) => m.Equation),
)
const Pdf = dynamic(
() => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf),
{
ssr: false,
},
)
const Modal = dynamic(
() => import('react-notion-x/build/third-party/modal').then((m) => m.Modal),
{
ssr: false,
},
)
export const NotionPage = ({
recordMap,
rootPageId,
rootDomain,
}: {
recordMap?: ExtendedRecordMap
rootPageId?: string
rootDomain?: string
}) => {
const components = useMemo(
() => ({
Equation,
Pdf,
Modal: Modal,
nextLink: Link,
nextImage: Image,
// this will change all the urls to use the /docs prefix
// TODO: add language support
PageLink: ({ className, href, children }: { className: string, href: string, children: React.ReactElement }) => {
return (
<Link className={className} href={`/docs${href}`}>{children}</Link>
)
},
}),
[],
)
if (!recordMap) return null
const title = getPageTitle(recordMap)
return (
<>
<Head>
<meta name="description" content="Feddersen"/>
<title>{title}</title>
</Head>
<NotionRenderer
recordMap={recordMap}
fullPage={false}
darkMode={false}
rootPageId={rootPageId}
rootDomain={rootDomain}
searchNotion={searchNotion}
components={components}
/>
</>
)
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the NotionPage.tsx example and the Search/Modal component registration, then compare it with the repository's Next.js example and inspect how NotionRenderer resolves components. Reproduce the empty Modal warning and confirm the expected Modal rendering and supported approach for supplying a custom Search UI.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100