zoom bug about react-force-graph HOT 7 CLOSED

Vasco, can't thank you enough! It worked.

Tapped into the yarn.lock saw that d3-selection is indeed duplicated, but with different versions, 1.4.0 for react-force-graph and 1.1.0 for [email protected]. The file looked like this

d3-selection@1, d3-selection@^1.1.0:
  version "1.3.2"
  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.3.2.tgz#6e70a9df60801c8af28ac24d10072d82cbfdf652"
  integrity sha512-OoXdv1nZ7h2aKMVg3kaUFbLLK5jXUFAMLD/Tu5JA96mjf8f2a9ZUESGY+C36t8R1WFeWk/e55hy54Ml2I62CRQ==

d3-selection@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.0.tgz#ab9ac1e664cf967ebf1b479cc07e28ce9908c474"
  integrity sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg==

I merged them together like so

d3-selection@1, d3-selection@^1.1.0, d3-selection@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.0.tgz#ab9ac1e664cf967ebf1b479cc07e28ce9908c474"
  integrity sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg==

Delete node_modules and ran yarn install and it all worked out!

from react-force-graph.

@qasimalbaqali if you have a dependency lock file (yarn.lock or package-lock.json) deduplicate the entries in that file so that you have a single instance/version of d3-selection. Then re-install the node_modules. That generally solves it.

from react-force-graph.

This change to d3-zoom/src/zoom.js will fix the issue
d3/d3-zoom@0a942f7

from react-force-graph.

I already find the solution. Thank you ;)

from react-force-graph.

@Cygnusfear I have the latest version of react-force-graph which all sub dependencies are up to date, precisely force-graph has the d3-zoom version with the mentioned commit that fixes the issue, but I am still running into it. Any ideas?

@SukPavel Could you please share the solution that you found, I would highly appreciate it :)

from react-force-graph.

@qasimalbaqali this sounds like a problem that happens when you have more than one version of d3-selection in your bundle. Can you check that?

from react-force-graph.

@vasturiano Thank you for your reply and amazing work! The project that I am working indeed has another d3-selection since we are using d3 library for another part of the project, so I am guessing you are right. Any ideas that you might have to guide me on how to solve an issue like this? The current version of d3 that we are using is @5.70.

I tried the fix that @Cygnusfear suggested, which means I have to tap into the node_modules folder to do this, which isn't a feasible solution for me. Any help would be highly appreciated Vasco :)

I tried to reproduce it in another project, where I install the same d3 version and react-force-graph, but that doesn't give the error, and the graph actually renders. Does it have to do with webpack in any chance as well? In the reproducing project, I am not using webpack.

from react-force-graph.