draggable prop issue

[chirag1718]

Thank you for taking the time to report an issue with react-d3-tree!

Feel free to delete any questions that do not apply.

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

I'm reporting a bug

What is the actual behavior/output?

I'm facing an issue with the "draggable" prop sometimes it work perfectly and sometimes it doesn't even work even though it is true. Like whenever I'm starting the server it work after 2 or 3 reloads and if I reload the page it does not work.

<div className="h-full w-full flex items-center justify-center bg-purple-300"> <div className="flex items-center justify-center border h-[800px] w-[1000px] overflow-auto" > <Tree data={orgChart} draggable={true} orientation="vertical" pathFunc="step" zoomable={false} collapsible={false} /> </div> </div>

[ZacharyHangoc]

Same issue

[hakverir]

Experiencing a similar issue, the exact same with https://stackoverflow.com/questions/77272006/react-d3-tree-zoom-and-drag-not-working-on-next-js-13

everything's fine locally, but dragging and zooming does not work on the client side.
Using next 13.4.8, react-d3-tree 3.6.1. There are no difference errors or warnings given by any packages

[Abutler101]

I had this issue with next 14.0.3, react-d3-tree 3.6.1 with dragging working intermittently (maybe 1 in 10 refreshes it work) and zooming not working at all.

I came across https://stackoverflow.com/questions/62944931/nextjs-issue-with-server-side-rendering-with-react-d3-tree which seems tangentially related and seems to me to suggest that Next is being overly eager with SSR and that is messing with the client side interactions. The solution: https://stackoverflow.com/a/65697349 looks to have worked for me

TLDR:
if you have your use of react-d3-tree in component X defined in File B, imported into File A which contains the 'top level page', change the import of X from B to a dynamic import:
Replace

import X from "@/Blah/Blah/components/B";

With

const X = dynamic(
    () => import("@/Blah/Blah/components/B"),
    { ssr: false }
);