🌊

Cloudflare Pagesでalgoliaを使うときに「XMLHttpRequest is not defined」となった時の対処法

2023/08/27に公開

発生した問題

Cloudflare Pagesにデプロイしたsvelte-kitアプリケーションから下記コードを使用してalgoliasearchで全文検索を行った際に「XMLHttpRequest is not defined」というエラーが発生しました。

export const client = algoliasearch("algoliaのアプリケーションID", "algoliaのAPIキー");
const index = client.initIndex('algoliaのindex名');
const searchResult = await index.search(query);

対処法

https://www.algolia.com/doc/api-client/getting-started/customize/javascript/?client=javascript#changing-http-request-methods

Cloudflare Pagesの環境において、algoliasearchはデフォルトでXHRを使用してリクエストが送信されるようです。
しかし、Cloudflare Pages環境ではXHRに対応していないため、fetchのみが使用可能です。
そのため、以下のようにalgoliasearchのリクエスト送信部分を修正し、XHRからfetchを使用するように変更しました。

export const client = algoliasearch("algoliaのアプリケーションID", "algoliaのAPIキー", {
	requester: createFetchRequester()
});

Discussion