`XMLHttpRequest is not defined` when running algoliasearch on the edge with nexts

[ddelizia]

Current configuration

• nextjs 14.2
• alogliasearch 4.23.3
• react-instantsearch 7.7.2
• react-instantsearch-nextjs 0.2.1

How to reproduce

I have setup nexts to work with app router following the documentation provided: https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/#app-router-experimental

I have configured the page.tsx to use the edge runtime, which will look as follow:

import { Search } from "./Search"; // change this with the path to your <Search> component

export default function Page() {
  return <Search />;
}

export const dynamic = "force-dynamic";
export const runtime = "edge"; // <- to force to run application on the edge

Run the next application and you will get the following error:

<ref *1> ReferenceError: XMLHttpRequest is not defined
    at eval (webpack-internal:///(ssr)/./node_modules/.pnpm/algoliasearch@4.23.3/node_modules/algoliasearch/dist/algoliasearch.umd.js:2:30215)
    at new Promise (<anonymous>)
    at Object.send (webpack-internal:///(ssr)/./node_modules/.pnpm/algoliasearch@4.23.3/node_modules/algoliasearch/dist/algoliasearch.umd.js:2:30184)
    at e (webpack-internal:///(ssr)/./node_modules/.pnpm/algoliasearch@4.23.3/node_modules/algoliasearch/dist/algoliasearch.umd.js:2:8624)
    at eval (webpack-internal:///(ssr)/./node_modules/.pnpm/algoliasearch@4.23.3/node_modules/algoliasearch/dist/algoliasearch.umd.js:2:8941)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at runNextTicks (node:internal/process/task_queues:64:3)
    at process.processTimers (node:internal/timers:511:9) {
  error: [Circular *1]
}

It seems that the issue is that algoliasearch is using XMLHttpRequest which is not present on the edge runtime.

[dhayab]

Hi, in a node environment, please check that you're importing the search client from algoliasearch instead of algoliasearch/lite if it's not already the case. You can also customize the HTTP requester by following this guide: https://www.algolia.com/doc/api-client/getting-started/customize/javascript/?client=javascript#changing-http-request-methods.

[Haroenv]

Actually for cloudflare you should use the fetch requester: https://github.com/algolia/algoliasearch-client-javascript/tree/master/packages/requester-fetch