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 emotion-js/emotion#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;

[DenisBessa]

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;

This won't solve the problem, because in Next.js, 'use client' means the component will be rendered both in server and in client. So the server will throw the error anyway.

[geneshairzan]

make

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;

This won't solve the problem, because in Next.js, 'use client' means the component will be rendered both in server and in client. So the server will throw the error anyway.

import that component in main component using dynamic

`
import dynamic from "next/dynamic";

const Tree = dynamic(() => import("@/component/tree"), {
ssr: false,
});

`