Cross-fetch is not usable in service workers

I’m using this library (via https://github.com/prisma-labs/graphql-request) and it fails to make requests when used within a browser service worker. More specifically, it throws:

ReferenceError: XMLHttpRequest is not defined
    at browser-ponyfill.js:463
    at new Promise (<anonymous>)
    at Object.fetch [as default] (browser-ponyfill.js:455)
    at GraphQLClient.<anonymous> (index.ts:87)
    at step (createRequestBody.ts:45)
    at Object.next (createRequestBody.ts:45)
    at createRequestBody.ts:45
    at new Promise (<anonymous>)
    at createRequestBody.ts:45
    at GraphQLClient.request (index.ts:73)

Service workers do always have fetch available, but they don’t have XMLHttpRequest. See https://github.com/whatwg/xhr/issues/19 for some background from the spec discussion.

Because they are a browser environment though, https://github.com/lquixada/cross-fetch/blob/master/dist/browser-ponyfill.js from this library is used, which incorrectly seems to assume XHR is always available in all modern browser environments.

I think all that’s required here is to fall back to the built-in Fetch that is available in this case.

[Nick-Mazuk]

Running into this issue on Cloudflare Workers as well. Any dependency that uses cross-fetch cannot be used on Cloudflare Workers right now.

[karol-cf]

Hi,

I have this issue when trying to use Supabase in an MV3 Chrome Extension’s service workers. I’m using an example I’ve found in this YouTube video (he’s using MV2, which utilizes a background page, instead of service workers, so the issue is not present there). The extension allows you to sign up and log in with Supabase in a new Chrome tab. I’ve got a bundled version of supabase-js in my project. The supabase-js library is imported in the service worker and I create a client (as you can see on the screenshot below, I’ve tried binding the fetch as well). Whenever the user wants to authenticate, I send a message through the message passing API to my service worker and call various supabase.auth methods. Every time the signUp method is called, for example, I get “ReferenceError: XMLHttpRequest is not defined” and the method does not proceed further (on the third screenshot I’ve tried signing up and it threw an error).

The only solution, that I think might work is removing the cross-fetch import from your lib and then bundling it, as mentioned above. Because of the MV3 requirements, I need that bundled js file anyway. However, I’d much rather not do that, because I don’t think that this is a clean way of solving the problem. Any other ideas?