Nivo: TypeError: Cannot read property 'showTooltipFromEvent' of undefined (@nivo-geo.esm.js:633)

[tg970]

Updated to the most recent versions of the packages today and now getting this error while using (render) the Responsive Choropleth:

nivo-geo.esm.js:633 Uncaught TypeError: Cannot read property 'showTooltipFromEvent' of undefined
at nivo-geo.esm.js:633
at renderWithHooks (react-dom.development.js:12938)
at mountIndeterminateComponent (react-dom.development.js:15020)
at beginWork (react-dom.development.js:15625)
at performUnitOfWork (react-dom.development.js:19312)
at workLoop (react-dom.development.js:19352)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at replayUnitOfWork (react-dom.development.js:18578)

In looking at the Tooltip package there might be something wrong with the exported 'useTooltip' function and the context it uses, which might be empty ('tooltipContext'). Still pretty new to hooks so will have to do some more research on how this might need to look.

Any help would be appreciated!

Thanks,
Tyler

[tg970]

Issue resolved itself - not quite sure how or why.

[BannukDE]

Really no clue what could have resolved it?
Having almost the same err msg with ResponsiveBarChart.
For me it is 'tooltip' of undefined (theme.tooltip.basic)

[tg970]

I know, wish I could put my finger on it but can't. I went ahead and updated all of my dependencies during this time for Webpack, npm (6.10.1), and Node (12.6.0) and so thinking that must have been it.

What versions are you running?

[mackattack3k]

Really no clue what could have resolved it?
Having almost the same err msg with ResponsiveBarChart.
For me it is 'tooltip' of undefined (theme.tooltip.basic)

I'm having this issue but with ResponsivePie. Did you solve it?

[Ajaay]

I'm having this issue with Radar as well. Anyone else managed to resolve it? Worked fine on an older version but updating the newest gives me this error.

[mackattack3k]

Did not manage to resolve it. I had to abandon nivo unfortunately.

[Michaelzvu]

Same thing with @nivo/bump

Cannot read property 'showTooltipFromEvent' of undefined
TypeError: Cannot read property 'showTooltipFromEvent' of undefined
at useSerieHandlers (http://localhost:9009/vendors~main.5bcb906ecc7a7699ea95.bundle.js:15643:42)
at Area (http://localhost:9009/vendors~main.5bcb906ecc7a7699ea95.bundle.js:15823:18)
at renderWithHooks (http://localhost:9009/vendors~main.5bcb906ecc7a7699ea95.bundle.js:198915:18)
at updateFunctionComponent (http://localhost:9009/vendors~main.5bcb906ecc7a7699ea95.bundle.js:201002:20)
at updateSimpleMemoComponent (http://localhost:9009/vendors~main.5bcb906ecc7a7699ea95.bundle.js:200940:10)
at updateMemoComponent (http://localhost:9009/vendors~main.5bcb906ecc7a7699ea95.bundle.js:200843:14)
at beginWork$1 (http://localhost:9009/vendors~main.5bcb906ecc7a7699ea95.bundle.js:202903:16)
at HTMLUnknownElement.callCallback (http://localhost:9009/vendors~main.5bcb906ecc7a7699ea95.bundle.js:182991:14)
at Object.invokeGuardedCallbackDev (http://localhost:9009/vendors~main.5bcb906ecc7a7699ea95.bundle.js:183040:16)
at invokeGuardedCallback (http://localhost:9009/vendors~main.5bcb906ecc7a7699ea95.bundle.js:183095:31)

[wyze]

@Michaelzvu Make sure all nivo charts are at the same version. If they mismatch and depend on different versions it usually causes these types of errors.

[Michaelzvu]

@wyze I did uninstall for all nivo packages and installed only:
"@nivo/axes": "^0.62.0", (Im getting an error without it)
"@nivo/bump": "0.62.0",
And still I have the same error: "Cannot read property 'showTooltipFromEvent' of undefined"

[plouc]

@Michaelzvu, there's a cyclic dependency between @nivo/core and @nivo/tooltip which could be the issue (especially with yarn 2 apparently), are you using yarn/npm? It might be useful if you could share the installed versions you got (npm list | grep '@nivo' or yarn list | grep '@nivo').

[Michaelzvu]

@plouc Im using npm

npm list | grep '@nivo'
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: angular@>=1.3 <1.6, required by [email protected]
npm ERR! peer dep missing: angular@~1.3.17, required by [email protected]
npm ERR! peer dep missing: angular-animate@>=1.3 <1.6, required by [email protected]
npm ERR! peer dep missing: angular-aria@>=1.3 <1.6, required by [email protected]
npm ERR! peer dep missing: [email protected], required by [email protected]
npm ERR! peer dep missing: angular@>=1.3 <1.6, required by [email protected]
npm ERR! peer dep missing: angular@~1.3.17, required by [email protected]
npm ERR! peer dep missing: angular-animate@>=1.3 <1.6, required by [email protected]
npm ERR! peer dep missing: angular@>=1.3 <1.6, required by [email protected]
npm ERR! peer dep missing: angular@~1.3.17, required by [email protected]
npm ERR! peer dep missing: acorn@^6.0.0, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: angular@>=1.3 <1.6, required by [email protected]
npm ERR! peer dep missing: angular@~1.3.17, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: ajv@^6.9.1, required by [email protected]
npm ERR! peer dep missing: angular@>=1.3 <1.6, required by [email protected]
npm ERR! peer dep missing: angular@~1.3.17, required by [email protected]
npm ERR! peer dep missing: angular@>=1.3 <1.6, required by [email protected]
npm ERR! peer dep missing: angular@~1.3.17, required by [email protected]
├─┬ @nivo/[email protected]
│ ├─┬ @nivo/[email protected]
│ │ ├── @nivo/[email protected] deduped
│ ├─┬ @nivo/[email protected]
├─┬ @nivo/[email protected]
│ ├─┬ @nivo/[email protected]
│ ├── @nivo/[email protected] deduped
│ ├─┬ @nivo/[email protected]
│ │ ├── @nivo/[email protected] deduped
│ ├─┬ @nivo/[email protected]
│ │ ├── @nivo/[email protected] deduped

[Michaelzvu]

Problem solved! Just did 'rm -rf node_modules package-lock.json'
Probably I had some issue with the package-lock.json file.

Thank you!

[amihalopoulos]

Stopping to confirm I had the same issue as @Michaelzvu and also fixed by deleting node_modules & package-lock .. all @nivo packages seemed to be @0.62.0 yet hovering/tooltip broke my app on multiple charts. Not sure what exactly caused the mixup but problem solved I guess