Next.js:使用react组织结构图时未定义文档

Question

我正在尝试使用react组织结构图，但我一直收到这个错误。

文档未定义

我正在使用Next.js。请参阅下面的代码：

import SidebarDesktop from "../components/layout/sidebarDesktop";
import SidebarMobile from "../components/layout/sidebarMobile";
import StickyHeader from "../components/layout/stickyHeader";
import navigationList from "../components/layout/navigationList";
import { Tree, TreeNode } from "react-organizational-chart";
import React, { useState, useEffect } from "react";
export default function OrganizationalChart() {
return (
<div>
<SidebarMobile menu={navigationList()} loc={asPath} />
<SidebarDesktop menu={navigationList()} loc={asPath} />
<div className="md:pr-52 flex flex-col flex-1">
<StickyHeader />
<main className="py-10 space-y-6">
<Tree
label="Root"
lineBorderRadius="10px"
lineColor="green"
lineHeight="30px"
lineWidth="3px"
>
<TreeNode label={<div>Child 1</div>}>
<TreeNode label={<div>Grand Child</div>} />
</TreeNode>
<TreeNode label={<div>Child 2</div>}>
<TreeNode label={<div>Grand Child</div>}>
<TreeNode
label={<div>Great Grand Child 1</div>}
/>
<TreeNode
label={<div>Great Grand Child 2</div>}
/>
</TreeNode>
</TreeNode>
<TreeNode label={<div>Child 3</div>}>
<TreeNode label={<div>Grand Child 1</div>} />
<TreeNode label={<div>Grand Child 2</div>} />
</TreeNode>
</Tree>
</main>
</div>
</div>
);
}

我想在我的react项目中创建一个组织结构图。如果你有更好的建议，请寄给我。

Answer 1

我使用next/dynamic解决了这个问题。

import dynamic from "next/dynamic";
const Organizational = dynamic(
() => import("../components/tree/Organizational"),
{
ssr: false,
}

)；