gestures.mouse is not a function

[samal-rasmussen]

I hate it when you get an error that noone on google has ever had before. In my case it is this:

Uncaught TypeError: gestures.mouse is not a function
at mousemoved (drag.js:69)

Relevant part og my parckage.json:

"d3": "4.13.0",
"d3-axis": "1.0.8",
"d3-scale": "1.0.7",
"d3-selection": "1.3.0",

And my handler:

nodes.call(d3.drag()
.on('start', (d) => {
	this.onDragStart(d);
})
.on('drag', (d) => {
	this.onDrag(d);
})
.on('end', () => {
	this.onDragEnd();
}));

The Error from above starts being logged to the console on any mousemoved event after the first drag end. this.onDragEnd is always being called, but after that i get the Error and all further handling of this event stops propagating, so it breaks all mouse handling after the first drag end.

[mbostock]

Possibly related, possibly not, but you shouldn’t have both d3 and D3 modules such as d3-axis listed in your package.json dependencies; either use the d3 default bundle (which includes d3-axis, d3-scale, d3-selection, etc.), or use the D3 modules individually. Depending on your toolchain, mixing D3 modules with the d3 default bundle may cause problems with d3.event being null, which could be what’s happening here.

Unfortunately, I can’t diagnose the issue more specifically that that without a link that demonstrates the issue. When asking for help, please include a link to demonstrate the issue, preferably as an Observable notebook. It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have further questions, please use Stack Overflow tag d3.js to ask for help. Stack Overflow provides a better collaborative forum: thousands of D3-related questions have been asked there, and some answers may be relevant to you.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗

[samal-rasmussen]

Thanks for the response @mbostock!

I've tried removing the other packages and only keeping the d3 package. It made no difference. So at least we know that. Let's see if I can wrangle out a minimal example that reproduces the problem.

[samal-rasmussen]

We found the issue. It's that d3-drag doesn't play well with this library that adds {passive: true} to all event handlers that don't specify otherwise: https://github.com/zzarcon/default-passive-events

So the fix for d3-drag is for it to explicitly add {passive: false} when it sets up event handlers.

[samal-rasmussen]

default-passive-events have described a workaround for the issue here: https://github.com/zzarcon/default-passive-events/blob/master/README.md#is-there-a-possibility-to-bring-default-addeventlistener-method-back-for-chosen-elementsglobally-eg-for-time-of-running-some-of-the-code