Reference Error: document is not defined

[kimjisena]

Describe the bug I'm trying to render a binary tree using react-organizational-chart but I keep getting a Reference Error: document is not defined.

To Reproduce I have a BinaryTree component which I'm rendering in a network page

// components/BinaryTree.tsx

import { Tree, TreeNode } from "react-organizational-chart";

export default function BinaryTree () {
  return (
    <div>
      <Tree label={<div>Root</div>}>
        <TreeNode label={<div>Left</div>}>
          <TreeNode label={<div>Left</div>} />
          <TreeNode label={<div>Right</div>}/>
        </TreeNode>
        <TreeNode label={<div>Right</div>}>
          <TreeNode label={<div>Left</div>} />
          <TreeNode label={<div>Right</div>}/>
        </TreeNode>
      </Tree>
    </div>
  );
}

// pages/network.tsx

import SEOHead from "../components/SEOHead";
import Layout from "../components/Layout";
import BinaryTree from "../components/BinaryTree";

export default function Network () {

  return (
    <div className={`w-full scroll-smooth flex flex-row-reverse md:pr-[4%] lg:pr-[8%]`}>
      <SEOHead title="Network" />
      <Layout active={1}>
        <BinaryTree />
      </Layout>
    </div>
  );
}

Expected behavior I expected to get a simple binary tree with 6 child nodes.

Screenshots Here's a screenshot of the error logs from my build step:

Browser (please complete the following information):

• Browser: Mozilla Firefox
• Version: 104.0.2

Additional context

• I'm only getting this error when using NextJs.

• I'm using

 "next": "^12.3.1",
 "react": "^18.2.0",

[daniel-hauser]

This error is related to https://github.com/emotion-js/emotion/issues/2801 and will happen in SSR only. The best way to mitigate it until fixed will render null in the server (i.e. { window ? <BinaryTree /> : null })

[kimjisena]

Tried to render unconditionally on the server by checking if window is defined, it doesn't seem to work.

I had to install @emotion/css as a project dependency and copied over your code into my project to get it to work.

There has to be a better way.

[dance-cmdr]

This error also prevents devs from using react-organizational-chart with next.js.

The use case is to render a sitemap. It has to be done statically or server-side for SEO purposes.

[yanalshoubaki]

I was have the same issue, how i fixed it : First create component with only the chart component like this

then in the main component :

this will fix the error.

[nayakayp]

I was have the same issue, how i fixed it : First create component with only the chart component like this

then in the main component :

this will fix the error.

I run in the local nextjs environment, and there's no error but when deployed in production, the error is raised. This fixed the error on build production :)

[brafiadi]

I was have the same issue, how i fixed it : First create component with only the chart component like this

then in the main component :

this will fix the error.

still, get the error when deployed to production

[brafiadi]

I try to import modules only in client side, and it's work on production

[rayaanr]

Place the 'use client' directive at the top of your page file for NEXT (App Route)

'use client'

import React from 'react';
import { Tree, TreeNode } from 'react-organizational-chart';

const ExampleTree = () => (
  <Tree label={<div>Root</div>}>
    <TreeNode label={<div>Child 1</div>}>
      <TreeNode label={<div>Grand Child</div>} />
    </TreeNode>
  </Tree>
);

export default ExampleTree;