'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? Thanks in advance

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>

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.