Polyfill XMLHttpRequest on the server

[ryyppy]

Hey everyone,

I have some data layer code that uses the global XMLHttpRequest object to do the queries, and I need to use this code on the server side with getStaticProps.

I tried using the xmlhttprequest package and included some code like this on the next.config.js:

const xhr = require("xmlhttprequest");

global.XMLHttpRequest = xhr.XMLHttpRequest;

When starting the dev server, the app doesn't crash anymore regarding a missing XMLHttpRequest constructor, but it also doesn't resolve the request and hangs in loading localhost:3000 indefinitely.

Does anyone know how to polyfill this the right way?

[jamesmosier]

I think you'd want to include this global.XMLHttpRequest = xhr.XMLHttpRequest; inside your getStaticProps function call.

import xhr from 'xmlhttprequest';

export async function getStaticProps(ctx) {
  global.XMLHttpRequest = xhr.XMLHttpRequest;  
}

---

Also if you are able to I'd recommend switching all xhr requests to use fetch. Next polyfills this on the server by default https://nextjs.org/docs/basic-features/supported-browsers-features#server-side-polyfills

[ryyppy]

Thanks, I will try your solution!

Also if you are able to I'd recommend switching all xhr requests to use fetch. Next polyfills this on the server by default

We are currently exploring a more lightweight (and easily cancelable) query approach in the ReScript community that doesn't rely on Promises, and there is no way we can use the fetch api for that unfortunately. It's unfortunate that the AbortionController api in combination with promises is so clunky (while having all the extra overhead of creating promises), just to be able to do something similar to XHR.