Vue js TypeScript error `Property '[RefSymbol]' is missing in type` when using Floating UI

183 views Asked by At

we are using floating UI with Vue and Typescript.

import { ref } from 'vue';
import { ReferenceElement, useFloating } from '@floating-ui/vue';

const reference = ref<ReferenceElement>();
const floating = ref<HTMLElement>();
  
useFloating(reference, floating);

We have recently started getting a ts error on passing reference to useFloating:

Argument of type 'Ref<ReferenceElement | undefined>' is not assignable to parameter of type 'Readonly<Ref<MaybeElement<ReferenceElement>>>'.
  Property '[RefSymbol]' is missing in type 'Ref<ReferenceElement | undefined>' but required in type 'Readonly<Ref<MaybeElement<ReferenceElement>>>'.ts(2345)
reactivity.d.ts(384, 5): '[RefSymbol]' is declared here.

Floating UI useFloating is decalared as

export declare function useFloating<T extends ReferenceElement = ReferenceElement>(reference: Readonly<Ref<MaybeElement<T>>>, floating: Readonly<Ref<MaybeElement<FloatingElement>>>, options?: UseFloatingOptions<T>): UseFloatingReturn;

Vue's Ref declaration is...

declare const RefSymbol: unique symbol;
declare const RawSymbol: unique symbol;
export interface Ref<T = any> {
    value: T;
    /**
     * Type differentiator only.
     * We need this to be in public d.ts but don't want it to show up in IDE
     * autocomplete, so we use a private Symbol instead.
     */
    [RefSymbol]: true;
}

It sounds like FloatingUI should NOT be looking for RefSymbol in the type as its a hidden field use for a differentiator ??

Any ideas how to sort this, rather than just suppressing the error?

0

There are 0 answers