Search API using Next.js: Failed to load Pagefind metadata

[pmillspaugh]

Hi, I am excited about Pagefind — thanks for creating it!

Note: I originally asked this on Discussions (#481). If it's not an appropriate issue (because it's a me issue not a pagefind issue), I'd be glad to take this down!

The error

I am running into a Failed to load Pagefind metadata error when initializing the Pagefind Search API in this PR.

Pagefind throws the error in this fetch call. The browser adds info: Not allowed to load local resource: file:///my/path/to/pagefind/pagefind-entry.json?ts=1697986568739. How can I ensure that fetch points to my client-side bundle rather than trying to fetch a local file path?

More info

I see that the Search API exposes bundlePath and baseUrl options, but I haven't had success altering those. I also tried explicitly calling pagefind.init() before .search(), which leads to the same error.

I also saw that a similar strategy works in Astro, so I'm hoping there's just a small piece I'm missing.

[pmillspaugh]

I also tried outputting the search bundle into my static assets folder via pagefind --output-path public/pagefind, but that yields the same error.

My guess is that the Next bundler resolves dynamic imports differently than in the Astro example with a vanilla script tag, so I tried swapping out the dynamic import for a static import. That breaks the build, throwing ReferenceError: location is not defined when attempting to load the script.

[pmillspaugh]

I realized my approach was a bit different than the one in the docs (and Astro example). I thought I should (1) build my static site bundle, (2) generate my pagefind search bundle and output it to my static asset dir public/, then (2) re-build my static site bundle with the pagefind resources.

So if I remove that third step, I (hopefully) just need to know where to output the pagefind search bundle in the second step, although that isn't immediately obvious to me. For example, it looks like my development mock file /public/pagefind/pagefind.js gets output into .next/static/chunks/800.e63360a6622816d4.js according to react-loadable-manifest.json:

{
  "search.tsx -> ../../public/pagefind/pagefind.js": {
    "id": 7800,
    "files": [
      "static/chunks/800.e63360a6622816d4.js"
    ]
  }
}

[bglw]

Hmm, I don't have experience piping Pagefind's scripts through a bundler — I usually exclude the pagefind.js import from bundling altogether and load it dynamically. Usually with something like

import(/*webpackIgnore: true*/ '/pagefind/pagefind.js');

I don't know if there's a nice way to transitively target just the /pagefind/pagefind-entry.json import within that file. I think esbuild ignores them by default, and I haven't used *pack in a while so it's not fresh on my mind.

Let me know if there's anything that would help from Pagefind's side. I have been wanting to publish a wrapper around the search JS as a npm package, so this might be a good prompt to do so. I need to do some research first on how to reliably make that wrapper bundler-friendly around a dynamic import.

[pmillspaugh]

Thanks for getting back to me, @bglw! I'll try your suggestion of telling webpack to ignore the search bundle.

An npm package for the search JS would be handy, but in the meantime hopefully I'll get this working and feel more comfortable with bundlers as a result 🙂

[pmillspaugh]

Worked like a charm — thank you, @bglw! PR updated with a preview deployment showcasing the snappy search.

Now I just need to cobble together a UI and ship it, then I'll write up a blog post in case anyone else is keen on using Pagefind with Next.js.

[bglw]

Awesome! Looking forward to it — ping me when a post is out and I'll add it to the resources page 🙂

[pmillspaugh]

Shipped. Thanks again, @bglw!

[pmillspaugh]

I made a few tweaks to my implementation and the blog post (added a section with more pagefind options and clarified pnpm postbuild—thanks to @noxify). Lmk if you have any feedback, @bglw!