Tabs: "ResizeObserver: parameter 1 is not of type 'Element'" thrown on mount (reka-ui TabsIndicator)

[krantheman]

Description

Mounting any <Tabs> throws an uncaught promise rejection on mount:

Uncaught (in promise) TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
    at useResizeObserver (@vueuse/core)
    at setup (reka-ui TabsIndicator)

The tabs still render and switch — only the sliding indicator's initial measurement fails — but the error fires on every Tabs instance, so the console fills with it (one per tabbed view/modal). Reproduces consistently across every Tabs usage in our app.

Environment

• frappe-ui: 1.0.0-beta.9
• reka-ui: 2.10.0 (frappe-ui requires ^2.5.0)
• @vueuse/core: 14.3.0 (resolved under reka-ui; reka requires ^14.1.0)
• Vue 3 + Vite

Root cause

reka-ui's TabsIndicator does:

useResizeObserver(computed(() => [context.tabsList.value, ...tabs.value]), updateIndicatorStyle)

context.tabsList is reka's currentElement (from useForwardExpose()). On the immediate (flush: 'post') run during mount, it resolves to a truthy non-Element node before the TabsList element is settled. @vueuse@14.3.0's useResizeObserver only guards falsy targets:

for (const _el of els) if (_el) observer.observe(_el, observerOptions)

So a truthy non-Element passes if (_el) and reaches observer.observe(...), which throws parameter 1 is not of type 'Element'.

Suggested fix

In Tabs.vue (or by constraining what's passed to the observer), either:

• filter the observed targets to real elements, e.g. el instanceof Element, or
• defer the indicator's useResizeObserver until isMounted is true and an active tab element exists.

Possibly related

Tabs.vue sets :default-value="props.tabs[0].label" while TabsTrigger/TabsContent are keyed by array index (:value="i"). So when used without v-model, the default value (a label string) matches no trigger value (a number), and no tab is active by default — which may be what leaves the indicator without a valid element to observe on the first tick.

Minimal reproduction

<Tabs v-model="tabIndex" :tabs="[{ label: 'A' }, { label: 'B' }]">
  <template #tab-panel="{ tab }">{{ tab.label }}</template>
</Tabs>

Open the console on mount.

[barista-for-frappe]

Confirmed in src/components/Tabs/Tabs.vue. The reporter's diagnosis holds up.

• Tabs.vue:73 sets :default-value="props.tabs[0].label" (a string label), but TabsTrigger/TabsContent are keyed by array index :value="i" (a number) at lines 90 and 116. The default value matches no trigger, so on the first tick reka's TabsIndicator has no resolved active-tab element.
• The thrown ResizeObserver error itself is upstream (reka-ui TabsIndicator + @vueuse observe() only guards falsy targets), but the default-value/value type mismatch is the frappe-ui-side contributor that leaves the indicator without a real Element to observe.
• default-value is also redundant with v-model="model" (line 74), which already defaults to 0 via internalModel (added in 4384e46).

Likely fix: make default-value consistent with the index keys — :default-value="0" — or drop it and rely on the v-model fallback. A guard so the indicator only observes real elements would harden it regardless.

_{barista · claude-opus-4-8 · 12k in / 4.5k out · 911k cached · 77s · $0.626}