Resize Observer Error on Vertical Resize

[curran]

While working with Unovis components, I notice that this error occurs frequently.

Reproduction:

• Change <VisSingleContainer height={400}> to <VisSingleContainer> on line 11 of packages/dev/src/examples/misc/donut/donut-empty-segments/index.tsx
• Open that example at http://localhost:9500/examples/Donut/Donut:%20Empty%20Segments
• Resize vertically
• See the error happen

The docs say:

By default, Container automatically fits to the size of the parent element.

so, I would expect this to work without errors.

[curran]

After enabling sourcemaps in #457 , I see this:

Related issue:

https://github.com/webpack/webpack-dev-server/issues/4812

It seems that what's happening is that the Webpack dev server is intercepting the error, which is coming from within the Unovis codebase

[curran]

Actually, this error is happening on the current main, even without changing the height of the donut chart.

[curran]

Researching this, the most common way to solve it is to throttle or debounce the updates. That's something I can try, which seems like pretty low hanging fruit!

[curran]

Oh wow there's already a dependency here for https://github.com/niksy/throttle-debounce

It's only used in packages/ts/src/utils/data.ts, with this style:

import { throttle as _throttle } from 'throttle-debounce'

I can copy that style.

[curran]

Nope. I tried throttling the updates and that didn't work.

Reading more on the error itself:

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors

[curran]

Some things I tried that didn't work:

• Debouncing the rendering
• Setting a flag to ignore resize observer events when rendering is taking place

The error still happened after either of those.

I didn't open any PRs with these changes since they didn't work. I'd like to get to the bottom of this one, since it's the starting point for local testing of vertical resize.

I wonder if there's some workaround where I could avoid solving this but also enable vertical resizing of the dev page for

• 454

[rokotyan]

Trying to reproduce it. After removing height={400} it works well on my end. I've also tried setting height to 80vh, still works:

https://github.com/user-attachments/assets/53aecbc9-a071-40dd-ba00-4bc123a2fbb8

@curran Can you try a clean install? npm run install:clean from the root folder.