Latest update broke canvas mouse interaction

[jsnns]

Canvas charts log an error on mouse move. Can be reproduced on nivo.rocks just by choosing a canvas and hovering over the chart.

Uncaught TypeError: t.getBBox is not a function

Device info:
MacBook Pro — running macOS Monterey 12.5
Mac Pro — running macOS Monterey 12.5

[shehi]

+1 Yes, I just started to have the same problem after upgrading to React 18.

Is this related to #2122 ?

[jamie-brown-cc]

This also breaks tooltips - the tooltips do not render on the canvas charts on version 0.80.o either.

[baruchiro]

I think this is the problematic code (from 0.80.0):

nivo/packages/core/src/lib/interactivity/index.js

Line 15 in df352b8

const box = el.getBBox()

And it seems to be fixed by #2125:

nivo/packages/core/src/lib/interactivity/index.js

Lines 33 to 36 in 3e639a2

	if (el.getBBox !== undefined) {
	// For SVG elements.
	originalBox = el.getBBox()
	} else {

@plouc consider closing this issue?

[TheOGRafiki]

any updates?

[antonmikhaliou]

Anybody here? Rlly need this fix

[ErwinJapie]

Would be nice if this could be fixed, the package is unusable now with latest (18) react version

[pieterseeder]

@ErwinJapie i encounter the same issue. this is really problematic.

[shehi]

I don't mean disrespect, but I hope nothing has happened to @plouc :( The issues of past 6 months piled up so badly, and zero comment from him to any of those - very disconcerting!

[ansgarsteinkamp]

Same problem here. Nivo is unusable now regarding canvas-components.

[ShavaShav]

Same here. Really wish I could use ResponseLiveCanvas for a chart with many points, but the tooltips don't show due to this issue.

[sighrobot]

+1 to above (I tried a workaround but was foiled by lerna/lerna#2074)

[sighrobot]

OK! Here's a workaround that I just tested! Seems like it might unblock some of you. You can shim HTMLCanvasElement.prototype.getBBox somewhere in your application, ideally before your canvas visualization is instantiated:

HTMLCanvasElement.prototype.getBBox = function () {
  return { width: this.offsetWidth, height: this.offsetHeight };
};

For my use case in Next.js, I wrapped it in an effect hook to run once on the client:

React.useEffect(() => {
  HTMLCanvasElement.prototype.getBBox = function () {
    return { width: this.offsetWidth, height: this.offsetHeight };
  };
}, []);

This is almost identical to the fix in #2125. Just use with care until we see a version bump 🥲

[shehi]

@sighrobot : Works, thanks. Sadly, @plouc merged #2125 right after 0.80 release, so it isn't part of any release.

[titmousemees]

This issue has been fixed when updating to v0.82.0

[shehi]

This issue has been fixed when updating to v0.82.0

0.82 isn't installable :) We all are stuck with 0.80 or 0.81, I don't even remember.

[titmousemees]

This issue has been fixed when updating to v0.82.0

0.82 isn't installable :) We all are stuck with 0.80 or 0.81, I don't even remember.

hmmm, that's strange. My packages are all up to date without a problem:

"@nivo/bar": "^0.83.0",
"@nivo/bullet": "^0.83.0",
"@nivo/core": "^0.83.0",
"@nivo/funnel": "^0.83.0",
"@nivo/line": "^0.83.0",

[ErwinJapie]

I installed v0.83.0 today and can confirm the issue is fixed 🎉

[shehi]

Not installable due to #2310.