Arrow not working in svelte 4 with typescript

[serferdinand2]

I tried implementing Arrow in the following manner as per README:

<script lang="ts">
    import { fade } from 'svelte/transition';
    import { offset, flip, shift } from 'svelte-floating-ui/dom';
    import { createFloatingActions, arrow } from 'svelte-floating-ui';
    import { writable } from 'svelte/store';

    const arrowRef = writable(null) as unknown as HTMLElement;
    const [floatingRef, floatingContent] = createFloatingActions({
        strategy: 'absolute',
        placement: 'bottom',
        middleware: [offset(6), flip(), shift(), arrow({ element: arrowRef })],
        onComputed({ placement, middlewareData }) {
            const { x, y } = middlewareData.arrow;
            const staticSide = {
                top: 'bottom',
                right: 'left',
                bottom: 'top',
                left: 'right',
            }[placement.split('-')[0]];

            Object.assign($arrowRef!.style, {
                left: x != null ? `${x}px` : '',
                top: y != null ? `${y}px` : '',
                [staticSide]: '-4px',
            });
        },
    });

    export let tip: string;

    let showTooltip = true;
</script>

<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
    class="sp-survey--tooltip--wrapper"
    use:floatingRef
    on:mouseenter={() => (showTooltip = true)}
    on:mouseleave={() => (showTooltip = false)}>
    {#if showTooltip}
        <div
            style="position:absolute"
            use:floatingContent
            class="sp-survey--tooltip--content"
            transition:fade|global>
            {tip}

            <div
                class="arrow"
                bind:this={$arrowRef} />
        </div>
    {/if}
    <slot />
</div>

<style>
    .sp-survey--tooltip--content {
        background-color: #000;
        color: #fff;
        padding: 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        opacity: 0.8;
        z-index: 9999;
        overflow: auto;
        display: inline-block;
    }

    .arrow {
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -0.5rem;
        border-width: 0.5rem;
        border-style: solid;
        border-color: transparent transparent #000 transparent;
        z-index: 9999;
    }
</style>

Under staticSide under Object.assign function I get the following error:

A computed property name must be of type 'string', 'number', 'symbol', or 'any'.

My x and y are also giving me an error of :

Property 'x' (or y) does not exist on type '(Partial<Coords> & { centerOffset: number; alignmentOffset?: number | undefined; }) | undefined'.ts

when I bind $arrowRef, the error message states:

No overload matches this call. Overload 1 of 2, '(store: SvelteStore<any>): any', gave the following error. Argument of type 'HTMLElement' is not assignable to parameter of type 'SvelteStore<any>'. Property 'subscribe' is missing in type 'HTMLElement' but required in type 'SvelteStore<any>'. Overload 2 of 2, '(store: SvelteStore<any> | null | undefined): any', gave the following error. Argument of type 'HTMLElement' is not assignable to parameter of type 'SvelteStore<any>'.ts(2769)

The arrow is not showing in the preview.

Do You have any suggestions?

[fedorovvvv]

Hi!✨ I fixed it, turns out FloatingUi removed those types, I tried to update them

You can try again)

[utku-kaan]

I'm having the same problem with the latest versions: floating-ui/core (1.5.0) and svelte-floating-ui (1.5.6). I used the exact same implementation and received the same error messages.