How does one use the pagefind JavaScript API within Sveltekit?

[hankertrix]

I want to use pagefind to search through my mostly statically generated website, but I'm running into a lot of issues trying to get pagefind to work. I'm also building a custom search UI, which is why I need the JavaScript API. I'm using Sveltekit 1.20.4 and am using Vite as the build tool. My build directory is Sveltekit's default build directory, .svelte-kit. All of the pages in the site are pre-rendered as well, except for this search page.

The files below are inside the folder src/routes/search.

This is the search UI in a +page.svelte file:

<script lang="ts">
  export let data;
  const results = data.results;
</script>

{#each results as result}
  <div>{result.url}</div>
  <div>{result.excerpt}</div>
{/each}

This is the +page.ts file to search for the search term with pagefind before rendering the page:

export const prerender = false;

export async function load({ params, url }) {
  const searchQuery = url.searchParams.get("q")?.trim();
  if (!searchQuery || searchQuery.length < 1) return { results: [] };
  const pagefind = await import("/_pagefind/pagefind.js");
  const search = await pagefind.search(searchQuery);
  const results = await Promise.all(search.results.map(r => r.data()));
  return { results: results };
}

The import statement to import pagefind in the +page.ts file cannot find pagefind, which is to be expected as the site hasn't been built yet and pagefind runs after the site has been built, but this would cause the build to fail. Running pagefind before building the site doesn't work either since there are no pre-rendered pages for pagefind to index.

Also, even when the site has been indexed, Sveltekit is unable to find the file that is being imported in the await import("/_pagefind/pagefind.js"); statement despite the file existing. Changing the file path to the path where pagefind is located, like await import("../../../.svelte-kit/_pagefind/pagefind.js");, also doesn't work as pagefind throws a reference error that location is not defined, which I assume to be the browser's window.location.

Please help, thank you.

[hankertrix]

Refer to issue #327 for the answer.