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.