Cross-fetch is not usable in service workers
See original GitHub issueI’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:
- Created 3 years ago
- Reactions:12
- Comments:10
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Running into this issue on Cloudflare Workers as well. Any dependency that uses cross-fetch cannot be used on Cloudflare Workers right now.
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?