XMLHttpRequest is not defined

[spencerjsmall]

I'm building a React app using Remix (SSR) and ran into issues with XMLHttpRequests in this package, which aren't supported by Node. My workaround was to use yarn patch and packageExtensions to add xhr2 as a dependency and replace the existing requests in dist/mapbox-gl-directions.js.

Wondering if anyone else has encountered this and if there might have been a better solution. I noticed that the demo @teaden made had no issues so I'm thinking it might have to do with using an SSR framework.

[thomastkt]

Hi, I have the same issue with angular, I tried what you did with xhr2 dependency but it doesn't work for me.
If anyone has a solution, that would be great

[heyimcarlos]

@spencerjsmall could you show some code on how you fixed this? Using Nextjs and having the exact same issue.

[spencerjsmall]

@renzik At the top of dist/mapbox-gl-directions.js I included var xhr = require('xhr2'), then replaced the three or so XMLHttpRequests with xhr. This didn't work when I set the xhr2 constructor name to XMLHttpRequest and I also needed to add a blank line after the xhr2 import statement. Hope this helps.

[ljq2022]

Bumping this thread if anyone has found alternative fixes to the issue.

[arnevankauter]

Any ideas to fix this issue?

[minjaekwon9]

When I tried the fix it gives me the error:

Class constructor XMLHttpRequest cannot be invoked without 'new'

[jeremyrajan]

Yeap solved it using,

global.XMLHttpRequest = require("xhr2");

You can do this in your _app.ts if you are using nextjs@12 or in layout.tsx if you are using nextjs@13

[jmndao]

Hello, thanks @jeremyrajan . Your solution works form me.
However, I should mention these steps to make it more clear (for my case):

• install xhr2 pkg using yarn or npm yarn add xhr2
• import it `import xhr2 from "xhr2"
• Then, use the line @jeremyrajan indicates to fix it global.XMLHttpRequest = xhr2

Thanks

[qbacuber]

Hey i have a similar problem in my nextjs application.
I've switched from page to app route and I'm having a problem with just authorization using next-auth and grpc.
I added this code snippet in layout.tsx and still get error.

global.XMLHttpRequest = require("xhr2");

error:

..\node_modules\grpc-web\index.js (18:499) @ self
app:dev: - error Error [ReferenceError]: self is not defined

stack:
next: 13.4.7
next-auth: 4.22.1
react: 18.2.0
xhr2: 0.2.1

[GuyFawkesII]

Hey i have a similar problem in my nextjs application. I've switched from page to app route and I'm having a problem with just authorization using next-auth and grpc. I added this code snippet in layout.tsx and still get error.

global.XMLHttpRequest = require("xhr2");

error:

..\node_modules\grpc-web\index.js (18:499) @ self
app:dev: - error Error [ReferenceError]: self is not defined

stack: next: 13.4.7 next-auth: 4.22.1 react: 18.2.0 xhr2: 0.2.1

same problem , have you managed to fixed it yet?