sveltekitsvelte-5

'state' is not defined svelte (missing-declaration)


In the code listed below I am getting an error:

[svelte-5] 'state' is not defined svelte (missing-declaration)

The app was created using npx sv create app. I added the component file named searchForm.svelte and modified the file +page.svelte. I suppose that I have modified something outside of those bounds, but cannot imagine what that would be. Where is the '$state' rune defined?

Where are the other runes defined?
What am I missing? What did I blow away?

relevant code in file named: searchForm.svelte

<script lang="ts">
  import { prependOnceListener } from "process";
  import { derived } from "svelte/store";

  let searchString: string = $state();

  function onkeydown(event: any) {
    // enter has keyCode = 13
    if (event.keyCode == 13) {
      console.log("enter key pressed: '" + searchString + "' will be searched.")
      return false;
    }
  };

  function searchData(searchText: string) {
    let request2 = {
      method: "GET",
      headers: { "Content-Type": "application/json; charset=utf-8" }
    }

    fetch("/api/json/v1/searchItems/" + searchText, request2)
      .then(response => response.json())
      .then(data => {
        console.log(data);
        return [];
      }).catch(error => {
        console.log(error);
        return [];
      }
      )
  };
</script>

<div class="container mx-auto mb-4 p-4 pt-4 pb-4 px-4 py-4 space-y-4 border-2 border-white rounded-xl dark:text-white">
  <form>
    <label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
    <div class="relative">
      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
          fill="none" viewBox="0 0 20 20" on:keydown={(event)=> event.key != 'Enter'}>
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
        </svg>
      </div>
      <input on:keydown={onkeydown} type="search" id="search"
        class="block w-full p-4 ps-10 font-bold text-4xl text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
        placeholder="Search" required />
    </div>
  </form>
</div>

<style></style>

Solution

  • The runes are declared in the svelte package within node_modules/svelte/types/index.d.ts.
    If the types are not automatically found, something about your IDE/TypeScript might be misconfigured.

    You can use the svelte-check package to rule out issues in TS config files/installed packages. If the check passes it should be the IDE.