useDimensions is not a function

[amcdnl]

Issue

In my open-source library ( reaviz.dev ), we use this project to measure the chart. In some instances ( such as code sandbox ), I get the following error. You can also live see the error here: https://codesandbox.io/p/sandbox/funny-currying-s7wgcn?file=%2Findex.js&from-embed=

TypeError
useDimensions is not a function
ChartContainer
https://s7wgcn.csb.app/node_modules/reaviz/dist/index.umd.cjs:2112:40
renderWithHooks
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:15486:18
mountIndeterminateComponent
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20103:13
beginWork
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21626:16
HTMLUnknownElement.callCallback
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4164:14
Object.invokeGuardedCallbackDev
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4213:16
invokeGuardedCallback
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4277:31
beginWork$1
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:27490:7
performUnitOfWork
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26596:12
workLoopSync
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26505:5
renderRootSync
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26473:7
performSyncWorkOnRoot
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26124:20
flushSyncCallbacks
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:12042:22
flushSync
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26240:7
legacyCreateRootFromDOMContainer
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:29614:5
legacyRenderSubtreeIntoContainer
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:29640:12
Object.render
https://s7wgcn.csb.app/node_modules/react-dom/cjs/react-dom.development.js:29731:10
$csb$eval
/index.js:18:9

Here is where I'm leverage the library: https://github.com/reaviz/reaviz/blob/master/src/common/containers/ChartContainer.tsx#L100

Its worth noting this doesn't get thrown all the time, just in some instances ( I haven't figured out what exactly this instance is that causes it though ). Have you seen this before?

Versions

"react-cool-dimensions": "^3.0.1",

[remarcable]

I have exactly the same issue and am still trying to figure out why. It seems like depending on the project, it sometimes doesn't export a function as the default export, but an object with a default key.

This hotfix solves this for me:

import _useDimensions from "react-cool-dimensions";

const useDimensions = typeof _useDimensions === "function" ? _useDimensions : _useDimensions.default;