rzh9b•2y ago

[react] document is not defined

the following code returns document is not defined. i have no idea how i'd go about fixing this. the example uses next.js' dynamic() but i'm doing this in "plain" react. any ideas? thanks!

import { NotionAPI } from "https://esm.sh/notion-client@6.15.6";
import { NotionRenderer } from "https://esm.sh/react-notion-x@6.15.7";

import { Collection } from 'https://esm.sh/react-notion-x/build/third-party/collection'

import { React, Suspense, ReactDOMServer, DOMParser } from "../deps.ts";

const notion = new NotionAPI();
const recordMap = await notion.getPage("f675efad218a4aea85546c036957f3f8");

export default function App (){
  return (
      <NotionRenderer recordMap={recordMap} fullPage={true} darkMode={true} components={{Collection}} />
  )
}

import { NotionAPI } from "https://esm.sh/notion-client@6.15.6";
import { NotionRenderer } from "https://esm.sh/react-notion-x@6.15.7";

import { Collection } from 'https://esm.sh/react-notion-x/build/third-party/collection'

import { React, Suspense, ReactDOMServer, DOMParser } from "../deps.ts";

const notion = new NotionAPI();
const recordMap = await notion.getPage("f675efad218a4aea85546c036957f3f8");

export default function App (){
  return (
      <NotionRenderer recordMap={recordMap} fullPage={true} darkMode={true} components={{Collection}} />
  )
}

11 Replies

Andreu Botella (they/them)•2y ago

Deno is on the server-side, not on the client-side you're trying to render the react component into the DOM in Deno, where there's no DOM

rzh9b•2y ago

ReactDOMServer is doing the work rendering it to a string

export default function render() {

  const html = ReactDOMServer.renderToString(
    <App />
  )

  return html;
}

export default function render() {

  const html = ReactDOMServer.renderToString(
    <App />
  )

  return html;
}

Andreu Botella (they/them)•2y ago

I have no clue about notion – is it supposed to be able to work with server-side rendering?

rzh9b•2y ago

this is react-notion-x, which gets data from notion and then just parses it

rzh9b•2y ago

https://github.com/NotionX/react-notion-x

GitHub

GitHub - NotionX/react-notion-x: Fast and accurate React renderer f...

Fast and accurate React renderer for Notion. TS batteries included. ⚡️ - GitHub - NotionX/react-notion-x: Fast and accurate React renderer for Notion. TS batteries included. ⚡️

rzh9b•2y ago

so theoretically there should be nothing wrong, but for some reason whenever i add the Collection component, it just dies lol

rzh9b•2y ago

https://github.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/third-party/collection.tsx

GitHub

react-notion-x/collection.tsx at master · NotionX/react-notion-x

Fast and accurate React renderer for Notion. TS batteries included. ⚡️ - react-notion-x/collection.tsx at master · NotionX/react-notion-x

ioB•2y ago

Looking at react-notion-x, it seems to me like it's actually doing rendering.

Fast and accurate React renderer for Notion.

rzh9b•2y ago

it is, but it has no problem with the flow i have now until i add the Collection component even in a fresh island it's still doing it so idk

Niladri Adhikary•4mo ago

i am trying to use react leaflet in deno + react but it says document not defined

NDH•4mo ago

Try adding the following to the top of that file:

/// <reference lib="dom" />

/// <reference lib="dom" />

This is how Fresh handles it, and how I write all client code in TS and then auto-esbuild it to a JS bundle.