The Pagefind ES-module search fix

The bug

Site search looked implemented — a search box existed, submitting a query didn’t error — but no results ever came back, for any query, ever.

The real cause

The search feature uses Pagefind, a static-site search library that builds its index at deploy time. Pagefind’s output, pagefind.js, is an ES module — it uses export statements internally and expects to be loaded via import, not injected as a classic <script src="..."> tag. The code was doing the latter: dynamically creating a <script> element and appending it to the page, the standard pattern for loading most third-party scripts. For a classic script, that works fine. For an ES module, the browser silently does not execute it the same way — no window.pagefind global ever gets created, and no error is thrown either, since nothing about the injection itself is invalid. The search box just had nothing to actually call.

The fix

Replaced the manual <script> injection with a dynamic import() call, which is the correct way to load an ES module at runtime and correctly resolves the module’s exports.

Why this is worth knowing generally

This is a genuinely easy trap: swapping a classic script for an ES-module-based library (increasingly common — many modern static-site tools ship as ES modules) and keeping the old “create a script tag” loading pattern produces no error at all, just silent non-functionality. If a third-party integration seems to load without complaint but simply never does anything, check whether its output is an ES module before assuming the bug is somewhere else.