Scan returning undefined

[TegarAditya]

I want to scan for devices with this plugin inside sveltekit project, but instead of getting 2 devices (number of online devices) list it just return 2 undefined. Any advice?

<script>
	// @ts-nocheck

	import { RangeSlider } from '@skeletonlabs/skeleton';
	import { BluetoothLe } from '@capacitor-community/bluetooth-le';

	const presets = [
		{
			name: 'Pilih Preset',
			min: 0,
			max: 0,
			duration: 0
		},
		{
			name: 'Terapi Infrared (Luminous 1)',
			min: 40,
			max: 60,
			duration: 900
		},
		{
			name: 'Terapi Infrared (Luminous 2)',
			min: 40,
			max: 60,
			duration: 1200
		},
		{
			name: 'Terapi Infrared (Non-Luminous)',
			min: 75,
			max: 90,
			duration: 1800
		}
	];

	const SERVICE_UUID = '4fafc201-1fb5-459e-8fcc-c5c9c331914b';
	const CHARACTERISTIC_UUID = 'beb5483e-36e1-4688-b7f5-ea07361b26a8';
	const MIN_RANGE_UUID = '00000001-0000-1000-8000-00805F9B34FB';
	const MAX_RANGE_UUID = '00000002-0000-1000-8000-00805F9B34FB';
	const DELAY_TIME_UUID = '00000003-0000-1000-8000-00805F9B34FB';

	let dpp = 1000;
	let min = 500;
	let max = 2000;
	let step = 100;
	let maxRange = 100;
	let minRange = 30;
	let selectedPreset = presets[0];

	$: delayTimeMs = dpp;

	// @ts-ignore
	$: console.log(selectedPreset);

	// @ts-ignore
	$: {
		if (selectedPreset !== presets[0]) {
			minRange = selectedPreset.min;
			maxRange = selectedPreset.max;
		}
	}

	/**
	 * @type {any[]}
	 */
	let devices = [];
	let currentDistance = '---';
	// @ts-ignore
	let selectedDevice = null;

	// Initialize BLE
	async function initializeBLE() {
		await BluetoothLe.initialize();
	}

	// Scan for BLE devices
	// @ts-ignore
	async function scanForDevices() {
		await BluetoothLe.requestLEScan({ services: [] });
		BluetoothLe.addListener('onScanResult', (result) => {
			devices = [...devices, result];
		});
	}

	// Connect to a device
	// @ts-ignore
	async function connectToDevice(deviceId) {
		await BluetoothLe.connect({ deviceId });
		selectedDevice = deviceId;
		startNotifications(deviceId);
	}

	// Start receiving notifications from the device
	// @ts-ignore
	async function startNotifications(deviceId) {
		await BluetoothLe.startNotifications({
			deviceId,
			// @ts-ignore
			service: SERVICE_UUID,
			// @ts-ignore
			characteristic: CHARACTERISTIC_UUID,
			// @ts-ignore
			onNotification: (notification) => {
				const dataView = notification.value;
				currentDistance = dataView.getUint8(0); // Assuming the distance is a single byte
			}
		});
	}

	// Write characteristic value
	// @ts-ignore
	async function writeCharacteristic(characteristicUUID, value) {
		// @ts-ignore
		if (!selectedDevice) return;
		const dataView = new DataView(new ArrayBuffer(2));
		dataView.setUint8(0, value);
		await BluetoothLe.write({
			deviceId: selectedDevice,
			// @ts-ignore
			service: SERVICE_UUID,
			characteristic: characteristicUUID,
			value: dataView
		});
	}

	// Call this function when the "Set" button for minRange or maxRange is clicked
	// @ts-ignore
	async function setRangeValue(characteristicUUID, rangeValue) {
		await writeCharacteristic(characteristicUUID, rangeValue);
	}

	async function setDelayTime() {
		if (!selectedDevice) return;
		const dataView = new DataView(new ArrayBuffer(4));
		dataView.setUint32(0, delayTimeMs, true); // Assuming the delay time is a 32-bit unsigned integer
		await BluetoothLe.write({
			deviceId: selectedDevice,
			service: SERVICE_UUID,
			characteristic: DELAY_TIME_UUID,
			value: dataView.buffer
		});
	}

	// Call this function when the component is first loaded to initialize BLE
	initializeBLE();
</script>

<div class="container py-5">
	<div class="mx-5">
		<div class="flex space-x-2">
			<select
				class="select"
				placeholder="Pilih Perangkat"
				bind:value={selectedDevice}
				on:change={() => connectToDevice(selectedDevice)}
			>
				{#each devices as device}
					<option value={device.deviceId}>{device.name}</option>
				{/each}
			</select>
			<button class="btn variant-filled variant-filled-surface" on:click={scanForDevices}
				>Scan</button
			>
		</div>
		<div class="card p-4 my-3 h-32 flex flex-col align-middle justify-center space-y-2">
			<p class="mx-auto font-semibold">Jarak saat ini</p>
			<p class="text-5xl font-bold mx-auto">
				{currentDistance}<span class="font-normal text-2xl">cm</span>
			</p>
		</div>
		<div class="card p-4 my-3 h-32 flex flex-col align-middle justify-center space-y-2">
			<RangeSlider
				name="range-slider"
				bind:value={dpp}
				{min}
				{max}
				{step}
				ticked
				on:change={setDelayTime}
			>
				<div class="flex justify-between items-center">
					<div class="font-bold">Durasi/Pengukuran</div>
					<div class="text-xs">{dpp / 1000} detik</div>
				</div>
			</RangeSlider>
		</div>
		<div class="card p-4 my-3 h-32 flex flex-col align-middle justify-center space-y-2">
			<p class="mx-auto font-semibold">Preset</p>
			<select class="select" placeholder="Pilih Perangkat" bind:value={selectedPreset}>
				{#each presets as preset}
					<option value={preset}>{preset.name}</option>
				{/each}
			</select>
		</div>
		<div class="flex align-middle space-x-3">
			<div class="card w-full p-4 h-fit flex flex-col align-middle justify-center space-y-2">
				<p class="mx-auto">Jarak Minimum</p>
				<input class="input" title="Input (number)" type="number" bind:value={minRange} />
				<button
					class="btn variant-filled variant-filled-primary font-bold"
					on:click={() => setRangeValue(MIN_RANGE_UUID, minRange)}>Set</button
				>
			</div>
			<div class="card p-4 w-full h-fit flex flex-col align-middle justify-center space-y-2">
				<p class="mx-auto">Jarak Maksimum</p>
				<input class="input" title="Input (number)" type="number" bind:value={maxRange} />
				<button
					class="btn variant-filled variant-filled-surface font-bold"
					on:click={() => setRangeValue(MAX_RANGE_UUID, maxRange)}>Set</button
				>
			</div>
		</div>
	</div>
</div>

[pwespi]

I suggest using the BleClient class and not the BluetoothLe plugin class directly as suggested in the usage documentation.