CloudflareのRocket Loaderをオフにした

結論

Cloudflare を Rocket Loader が、Pagefind の動作で不具合を引き起こしていたので、管理画面からオフにした。

rocket-loader.min.js が原因だった。

背景

ブログに pagefind を導入したところ、検索フォームが表示されなくて困った。

テスト環境を新規作成

Cloudflare Pages に、test-jibutare-org を新規作成。Pagefind をインストール。

npm install pagefind --save-dev

pagefind.toml をルートディレクトリに作成して記述

site = "public"
output_subdir = "pagefind"

hugo のテンプレートに追加。

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search", showSubResults: true });
    });
</script>

テンプレートの index.html と 404.html にフォームを追加

<div id="search"></div>

コマンドを実行

hugo
npx pagefind

master に push して Cloudflare pages の deploy が終わって、アクセスしてみたらフォームが表示された。

???

原因

テスト環境と本番環境に違いはないはず…

と、ソースを眺めていると、本番環境の </body> 直前に

rocket-loader.min.js

覚えのない .js が…

cloudflare の Rocket Loader の設定をオンしていた。cloudflare の管理画面に戻って、Rocket Loader™ をオフ。ようやく Pagefind の検索フォームが表示された。

原因は、Cloudflare の Rocket Loader だった。