search

bkrem / react-d3-tree

:deciduous_tree: React component to create interactive D3 tree graphs
https://bkrem.github.io/react-d3-tree
MIT License
1.09k stars 270 forks source link

selection.interrupt is not a function #401

Closed Hebsibal closed 2 years ago

Hebsibal commented 2 years ago

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?

Opening a bug

What is the actual behavior/output?

image

Can you consistently reproduce the issue/create a reproduction case (e.g. on https://codesandbox.io)?

When I try to use the Tree component into our existing project this issue occurs

What version of react-d3-tree are you using?

3.3.2

If react-d3-tree crashed with a traceback, please paste the full traceback below.

The above error occurred in the component: in Tree (created by InterestsTree) in InterestsTree (created by Connect(InterestsTree)) in Connect(InterestsTree) (created by Brand) in div (created by Brand) in div (created by Brand) in div (created by Layout) in div (created by Layout) in div (created by Layout) in div (created by Layout) in div (created by Layout) in Layout (created by Connect(Layout)) in Connect(Layout) (created by Route) in Route (created by withRouter(Connect(Layout))) in withRouter(Connect(Layout)) (created by Brand) in Brand (created by Connect(Brand)) in Connect(Brand) (created by Route) in Route in Switch in div in Router (created by BrowserRouter) in BrowserRouter in Unknown in Provider

zhouhao commented 2 years ago

Thank you for building the great library. My stack trace is as below, and I see a similar issue from another repo: https://github.com/vasturiano/react-force-graph/issues/310 & https://github.com/d3/d3-zoom/issues/167

Uncaught TypeError: selection2.interrupt is not a function
    at zoom.transform (zoom.js:89:17)
    at Selection.call_default [as call] (call.js:4:12)
    at Tree2.bindZoomListener (index.js:273:13)
    at Tree2.componentDidMount (index.js:223:14)
    at commitLifeCycles (react-dom.js:24631:24)
    at commitLayoutEffects (react-dom.js:27519:9)
    at HTMLUnknownElement.callCallback2 (react-dom.js:4747:16)
    at Object.invokeGuardedCallbackDev (react-dom.js:4795:18)
    at invokeGuardedCallback (react-dom.js:4869:33)
    at commitRootImpl (react-dom.js:27246:11)
    at unstable_runWithPriority (react.js:3107:14)
    at runWithPriority$1 (react-dom.js:13455:12)
    at commitRoot (react-dom.js:27074:5)
    at performSyncWorkOnRoot (react-dom.js:26367:5)
    at scheduleUpdateOnFiber (react-dom.js:25897:9)
    at updateContainer (react-dom.js:29851:5)
    at react-dom.js:30488:9
zhouhao commented 2 years ago

After de-duplicate d3-selection from package-lock.json file, finally, this component works.

Hebsibal commented 2 years ago

Hi @zhouhao, yes the same approach worked for me as well. My package-lock.json file had duplicate d3 dependencies pointing to different versions. so I deleted it completely and did npm install after npm cache clear in my local. This generated a fresh package-lock.json and the issue that I faced got sorted out.