Type 'HTMLElement | null' is not assignable to type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.ts(2322)

[a1tem]

Hi, tried this library with the nuxt3 framework, and got an error:

Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
Type 'null' is not assignable to type 'HTMLElement'.ts(2322)
np-select.d.ts(85, 2): The expected type comes from property 'root' which is declared here on type 'NpCitySelectConfig'

<template>
    <div>
        Nova Poshta Field

        <input type="text" id="city">
    </div>
</template>

<script setup lang="ts">
import { NpCitySelect, NpWarehouseSelect, utils } from 'np-select';

NpCitySelect({
    apiKey: 'b87d9e34dd42ed852b7b1f0bb....1212',
    input: {
      name: 'city',
      placeholder: 'Select City',
    },
    button: {
      text: 'Select City',
    },
    root: document.querySelector('#city'),
  });

</script>

Any ideas on how to fix this?

[derenko]

Hi @a1tem, sorry for the late reply, this error is not library related as document.querySelector returns HTMLElement | null, you need to add ! sign to tell typescript that the element is not null, also as I see it you need to move this code to onMounted hook and make this component client only, so the final code should look something like:

onMounted(() => {
  NpCitySelect({
    ...,
    root: document.querySelector("#city")!,
  })
})