react_cool_dimensions__WEBPACK_IMPORTED_MODULE_7__ is not a function

[aly-tq]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

I am using a next.js application and rendering the canvas inside of a client component page.

Here are my package versions:

    "next": "14.0.4",
      ...
     "react": "18.2.0",
    "react-cool-dimensions": "2.0.7",
    "react-dom": "18.2.0",
    "reaflow": "5.2.7"

When I try to use the default example:

<Canvas
          nodes={[
            {
              id: '1',
              text: '1'
            },
            {
              id: '2',
              text: '2'
            }
          ]}
          edges={[
            {
              id: '1-2',
              from: '1',
              to: '2',
              text: '1-2'
            }
          ]}
        />

TypeError: Cannot read properties of undefined (reading 'toUpperCase')
    at eval (webpack-internal:///(sc_client)/./node_modules/.pnpm/reakeys@1.3.1_react-dom@18.2.0_react@18.2.0/node_modules/reakeys/dist/index.js:105:32)
    at (sc_client)/./node_modules/.pnpm/reakeys@1.3.1_react-dom@18.2.0_react@18.2.0/node_modules/reakeys/dist/index.js (/Users/alyshahudson/Desktop/repos/admin-dashboard/.next/server/app/flow/page.js:13566:1)
    at __webpack_require__ (/Users/alyshahudson/Desktop/repos/admin-dashboard/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./node_modules/.pnpm/reaflow@5.2.7_react-dom@18.2.0_react@18.2.0/node_modules/reaflow/dist/index.js:60:66)
    at (sc_client)/./node_modules/.pnpm/reaflow@5.2.7_react-dom@18.2.0_react@18.2.0/node_modules/reaflow/dist/index.js (/Users/alyshahudson/Desktop/repos/admin-dashboard/.next/server/app/flow/page.js:13555:1)
    at __webpack_require__ (/Users/alyshahudson/Desktop/repos/admin-dashboard/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./app/flow/page.tsx:9:65)
    at (sc_client)/./app/flow/page.tsx (/Users/alyshahudson/Desktop/repos/admin-dashboard/.next/server/app/flow/page.js:2437:1)
    at __webpack_require__ (/Users/alyshahudson/Desktop/repos/admin-dashboard/.next/server/webpack-runtime.js:33:43)
    at requireModule (/Users/alyshahudson/Desktop/repos/admin-dashboard/node_modules/.pnpm/next@13.4.7_@babel+core@7.23.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:144:32)
    at initializeModuleChunk (/Users/alyshahudson/Desktop/repos/admin-dashboard/node_modules/.pnpm/next@13.4.7_@babel+core@7.23.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-
...
- error node_modules/.pnpm/reaflow@5.2.7_react-dom@18.2.0_react@18.2.0/node_modules/reaflow/dist/index.js (398:37) @ useLayout
- error TypeError: react_cool_dimensions__WEBPACK_IMPORTED_MODULE_7__ is not a function

Expected behavior

I am expecting it to compile without associated web-pack or type errors.

Minimal reproduction of the problem with instructions

Steps

Environment

Libs:
- react version: 18.2.0
- realayers version: 

Browser:

- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 21.1.0
- Platform:  MAC