zoom.js:91 Uncaught TypeError: selection.interrupt is not a function

[zamiang]

Describe the Bug

I updated from 9.7.4 to 10.0.3. I went through the migration instructions and am now getting this error. I was able to get the error when setting up react-flow even with no data being passed in and no custom options. This makes me think it is due to a incorrectly pinned dependency but I haven't dug into the issue in detail yet.

zoom.js:91 Uncaught TypeError: selection.interrupt is not a function
    at Function.zoom.transform (zoom.js:91:1)
    at slicedToArray.js:7:1

I believe it is coming from d3-zoom

in my packages

├─┬ @amcharts/amcharts5@5.1.8
│ └─┬ d3@6.7.0
│   └── d3-zoom@2.0.0
└─┬ react-flow-renderer@10.0.3
  └── d3-zoom@3.0.0

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Install 10.0.3 and likely have another library that also has d3 installed (such as amcharts)

Expected behavior

I expected the page to not crash 🤷

Screenshots or Videos

No response

Platform

Does not seem platform dependent but tried in chrome and safari on OSX

Additional context

No response

[moklick]

I think that you are right. It's because of the different d3-zoom packages. Could you try npm-dedupe?

[markwatabe]

@zamiang did you try that and did it work for you? I'm also running into this issue, even after I removed the other package that was using d3-zoom@2.0.0 and then reinstalled my dependencies.

[zamiang]

npm dedupe did not work. Currently working to convert the other library and internal code to d3v7

[santhedan]

Any update on the solution? I am trying to use ReactFlow in Grafana panel and have run into this issue. This issue does not happen with reactflow v9.7.1 but I face the same problem in reactflow 10.0.8. I do have multiple versions of d3zoom and d3selection in both projects but I face issue only with reactflow 10.0.8.

[santhedan]

I used this fix to proceed for now: https://github.com/d3/d3-zoom/commit/0a942f763afc7813d4b1186a1928fcd8f276cf84

[moklick]

I would really like to understand why we have this issue with the new version. Maybe because we are only offering an ESM build 🤔 I will need to do some research. Any help is highly appreciated!

[santhedan]

The fix that I applied above has a side effect - The + / - buttons on the controls stop working. They give the following exception:

react-dom.production.min.js:101 Uncaught TypeError: selection.transition is not a function at getD3Transition (index-61aaab1c.js:616:1) at zoomOut (useReactFlow-561d7c80.js:102:48) at eval (index3.js:131:1) at Object.Ue (react-dom.production.min.js:52:317) at $e (react-dom.production.min.js:52:471) at react-dom.production.min.js:53:35 at kr (react-dom.production.min.js:100:68) at Er (react-dom.production.min.js:101:380) at react-dom.production.min.js:113:65 at Ne (react-dom.production.min.js:292:189)

However the mouse wheel based zoom is working fine. The fit to view on the control panel is also working fine.

[Cashmeiser]

I have this same issue since upgrading from 9.x.x to to 10.1.0.

I hav another lib using "d3-selection" v2.0.0.

I will try to see if the other lib works with 3.0.0. Otherwise I might have to replace one the libs (that one or react-flow).

[sforehand]

Hi. I too am having the same error after upgrading from 9.x.x to 10.1.x. Right now, it is blocking our deployments. Any timeline available to resolve this issue? Thanks!

[parsch]

I had the same issue with following package.json config:

"dependencies": {
    ...
    "d3": "^7.4.4",
    ...
  },
"devDependencies": {
    ...
    "react-flow-renderer": "^10.1.2",
    ...
}

Moving both packages to devDependencies, deleting node_modules and package-lock.json and reinstalling all packages with npm i surprisingly fixed the issue for me.

While I'm only working on some quick & dirty mockups I'm not looking into this any further, just sharing it with fingers crossed it might help somebody else.

[stanislav-grin]

Having the same issue after upgrading from v9.7.3 to v10.1.2. Tried to remove d3-related dependencies, re-install everything, dedupe, etc, nothing helps 😕

[moklick]

Hey! Can someone create a repo for this error?

[santhedan]

@moklick Here is the Grafana plugin repo where this is reproducible.

https://github.com/philips-labs/grafana-bpm-plugin

[moklick]

@santhedan Thanks! I will check it.

[Michael-Xie]

Just tried to convert from v9 to v10 and this issue still exists

"react-flow-renderer": "^10.3.12"

[mustafaulukaya]

Is there any solution for this issue?

[chrisui]

Is there any solution for this issue?

Yes. Most likely you just need to ensure you do not have incorrect dependencies as per the previous comments.

Use npm ls and npm explain to help.

Eg. In our case an old version of d3 had a conflicting peer dependency.

[mustafaulukaya]

Alright, I figure it out. This way d3 version will be correct

1. Delete node modules
2. Delete all dependencies relevant d3
3. npm install react-flow-renderer and npm install other packages.

In this way, d3 dependencies installing for react-flow. When all installations are completed, you can install other d3 relevant packages.

[Michael-Xie]

Is there any solution for this issue?

Yes. Most likely you just need to ensure you do not have incorrect dependencies as per the previous comments.

Use npm ls and npm explain to help.

Eg. In our case an old version of d3 had a conflicting peer dependency.

how did you resolve conflicting peer dependency?

[Michael-Xie]

Alright, I figure it out. This way d3 version will be correct

1. Delete node modules
2. Delete all dependencies relevant d3
3. npm install react-flow-renderer and npm install other packages.

In this way, d3 dependencies installing for react-flow. When all installations are completed, you can install other d3 relevant packages.

I did step 1 and 3, and the issue still exist. Not really sure how to go about step 2.

[wes0310]

is there any solution so solve this problem?

[missing1984]

run into the same issue upgrading from v9 to v11

[missing1984]

figured that out, you will need to make sure reactflow use d3-selection v3. Technically a bug on d3-zoom where it shouldn't declared d3-selection v2 as its dependency.

[2s-adam]

I have d3-selection v2 installed, and I was able to get this to work for me. I'll share my solution in case it can help someone else.

Add this file: patch.js

import selection from 'd3-selection/src/selection';
import interrupt from 'd3-zoom/node_modules/d3-transition/src/selection/interrupt';
import transition from 'd3-zoom/node_modules/d3-transition/src/selection/transition';

selection.prototype.interrupt = interrupt;
selection.prototype.transition = transition;

Somewhere in the project, import the patch.js file:

import './patch.js';
import ReactFlow, { Controls, Background } from 'reactflow';

[moklick]

React Flow is not compatible with other libraries that depend on d3-zoom 2.0. If that's the case, you can try to force the other lib to use v3, or try the solution from this comment: https://github.com/xyflow/xyflow/issues/1979#issuecomment-2016378194

[bs-ashish-panwar]

npm remove react-flow-renderer

npm remove d3-selection

npm install react-flow-renderer

npm install d3-selection

use these steps it worked for me