vasturiano/force-graph

d3-zoom Error: selection.interrupt() is not a function

Opened this issue · 5 comments

NeoExtended commented

Describe the bug
After building my project with parcel i receive an error from d3-zoom line 91 that selection.interrupt() is not a function. I am not sure if this is error is related to this project or to the d3-zoom project.

I found multiple resources telling me this might be the cause of a d3-selection version conflict, but i double-checked and i only have a single version of d3-selection installed and d3-zoom has version 3.0.

Going into the node_modules folder and editing line 91 of d3-zoom (removing the .interrupt()-call) fiexes the problem, but i am not sure if that is the correct "fix" in this case.

Any help is highly appreciated.

My package.json deps looks like this:

  "devDependencies": {
    "@babel/core": "^7.14.8",
    "@babel/eslint-parser": "^7.14.9",
    "del": "^6.0.0",
    "eslint": "^7.32.0",
    "gulp": "^4.0.2",
    "gulp-replace": "^1.1.3",
    "gulp-zip": "^5.1.0",
    "parcel": "^2.0.0-rc.0",
    "prettier": "^2.3.2"
  },
  "dependencies": {
    "3d-force-graph": "^1.70.5",
    "force-graph": "^1.42.4",
    "jquery": "^3.6.0",
    "three": ">=0.118.3",
  }

From my package-lock.json:

    "node_modules/d3-zoom": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
      "dependencies": {
        "d3-dispatch": "1 - 3",
        "d3-drag": "2 - 3",
        "d3-interpolate": "1 - 3",
        "d3-selection": "2 - 3",
        "d3-transition": "2 - 3"
      },
      "engines": {
        "node": ">=12"
      }
    },

Desktop (please complete the following information):

  • OS: Windows 10 (the problem also persists on MacOS)
  • Browser Chrome 95.0 and Firefox 94.0.1
  • Version v1.42.4
vasturiano commented

@NeoExtended thanks for reaching out.

Indeed this issue typically occurs when you have more than one instance of d3-selection in your entire dependency tree.

If you look inside your package-lock.json can you look for d3-selection and see how many instances do you have (and for which versions)?

You can also try to run npm update, or even (temporarily) remove package-lock.json and re-install from scratch to see if the issue remains or gets solved.

NeoExtended commented

@vasturiano Thanks for your reply.

If i look into my package-lock.json, i can find two entries for d3-selection, but i think they point to the same version (i am using npm version 8.1.3 and with lockfileVersion 2 i think this is expected behaviour):

    "node_modules/d3-selection": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
      "engines": {
        "node": ">=12"
      }
    },

and

    "d3-selection": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
    },

A lot of packages have d3-selection in their dependencies, but they all accept version 3.

I have also tried to delete my package-lock.json and node_modules folder and even tried to completly reinstall npm, but neither worked. :(

If it makes it easier, i can upload my entire package.json and/or package-lock.json somewhere.

vasturiano commented

@NeoExtended the fact that you have two entries for d3-selection, even if it's the same version, it's most likely the core reason for your issue.

Perhaps you can try deduplicating your dependency tree. I know that with yarn you can do that with dedupe, maybe there's an npm equivalent.

You can also reach out to the maintainers of d3-selection for more dedicated help, since it's more relevant to that repo than this one at this point.

NeoExtended commented

Hey @vasturiano,
first of all thank you again for your help. I investigated further and found, that the problem seems to not be related to my installed packages, but to my building process.

Somehow parcel fails to include the file d3-transition/src/selection/interrupt.js and therefore the function is not available for d3-zoom. Disabling scope-hoisting via the --no-scope-hoist flag resolves the problem (but leads to larger file sizes). I will reach out to the maintainers of parcel and report the problem.

vasturiano commented

Thank you for reporting back on findings @NeoExtended. That's useful to know for future cases.