question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cross-fetch is not usable in service workers

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:12
  • Comments:10

github_iconTop GitHub Comments

1reaction
Nick-Mazukcommented, Aug 24, 2021

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

0reactions
karol-cfcommented, Apr 22, 2022

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

image image (1) image (2)

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cross-origin Service Workers - Experimenting with Foreign ...
Foreign fetch is no longer available for testing in Chrome, and has been removed from the service worker specification.
Read more >
Using Service Workers - Web APIs | MDN
A fetch event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, ......
Read more >
Can a service worker fetch and cache cross-origin assets?
The site uses third-party Javascript and stylesheets for web fonts. I want to add assets hosted on these CDNs to the offline cache....
Read more >
Service Workers - When Fetch Goes Wrong - YouTube
This is the seventh video in the Understanding Service Workers course.This video explains how you can use your Service Worker to handle an ......
Read more >
Serving - web.dev
The fetch event lets us intercept every network request made by the PWA in the service worker's scope, for both same-origin and cross-origin...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found