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 }
);

[ErikLysne]

I experienced this issue with Remix and Vite. When directly loading a page containing the Tree component, the following is logged in the browser console:

chunk-IF7RUSE7.js?v=65c5fd47:521 Warning: Prop id did not match. Server: "95feac5a-ee26-49f6-9665-d9bc0b395b80" Client: "0bdc528e-fa0d-443b-9dcd-769cfd34bcec"

and the component is not interactive.

However, when navigating to the same page through a Link, this does not happen, probably because the component has already been preloaded by Remix. The problem therefore seems to be related to hydration.

For now, I have solved it by wrapping the Tree component in the ClientOnly component from Remix utils.