XMLHttpRequest is not defined about mapbox-gl-directions HOT 10 OPEN

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

from mapbox-gl-directions.

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

from mapbox-gl-directions.

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

from mapbox-gl-directions.

@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.

from mapbox-gl-directions.

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

from mapbox-gl-directions.

Any ideas to fix this issue?

from mapbox-gl-directions.

When I tried the fix it gives me the error:

Class constructor XMLHttpRequest cannot be invoked without 'new'

from mapbox-gl-directions.

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

from mapbox-gl-directions.

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

from mapbox-gl-directions.

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?

from mapbox-gl-directions.