bkrem/react-d3-tree

Zoom and Drag not working on NextJS

pedrobarbeitos opened this issue · 2 comments

Are you reporting a bug, or opening a feature request?

Reporting a bug.

What is the actual behavior/output?

Drag and zoom don't work on NextJs 13/14.

I'm working on a Next.js 13 project using the react-d3-tree library for rendering a tree structure. I've added the zoom and drag properties to my tree component, but I'm encountering an issue where these features are not working consistently on the client side.

'm seeking advice on how to troubleshoot and resolve this issue, so that the zoom and drag functionality works consistently on the client side. Any insights or suggestions would be greatly appreciated.

you should import d3 tree like this :

import dynamic from "next/dynamic";
const Tree = dynamic(() => import("react-d3-tree"), { ssr: false });

Yup that solved it. Thank you!