Problem with domains and subdomains

[edpomacedo]

Hi there!

I managed to deploy to vercel a Hugo site with Pagefind.

At the domain Vercel assigned, is works.

At my custom domain, it does not work.

Am I missing something?

[bglw]

👋 Do you have a link to the domains? This likely isn't an issue on Pagefind's side since it's hosting agnostic, so it'll be an issue with either your build process or your hosting configuration on the Vercel end.

[edpomacedo]

Sure !

This one works (search icon/button at right top corner):

https://adv-dicio.vercel.app/

This one does not:

https://dicio.edpomacedo.adv.br/

Btw, awesome app!

[edpomacedo]

The hosting config (vercel.json at root):

{
    "build": {
      "env": {
          "HUGO_VERSION": "0.109.0"
        }
    }
}

Deploy/build:

hugo && npx -y pagefind --site public

The DNS is at Cloudflare , full SLL, proxied.

[bglw]

The issue here is with Cloudflare's Rocket Loader — it looks like the script rewriting it does messes with the DOMContentLoaded event, likely that event is firing before Cloudflare loads the actual script in. You can see on the production site:

<script type="91b9975072787fb2d75ab22f-text/javascript">
  window.addEventListener('DOMContentLoaded', (event) => {
      new PagefindUI({
          element: "#search",
          showImages: false,
          showEmptyFilters: false,
          showSubResults: true,
          translations: {
              placeholder: "Pesquisar palavras-chave",
              zero_results: "Nenhum resultado encontrado para [SEARCH_TERM]"
          }
      });
  });
</script>

Where the 91b9975072787fb2d75ab22f-text/javascript script type prevents the browser executing it, and however Rocket Loader is later executing it, the DOMContentLoaded listener never gets fired.

Here's an example of someone else wrangling with this initialization, there may be some tips in there for how to change the condition to work within Rocket Loader.

Alternatively, and more easily, you can just ignore that script if you're happy for it to be excused from the Rocket Loader system. Looks like adding data-cfasync="false" to the element is all that would be needed there.