cross-fetch issue with cloudflare and sveltekit

[bhvngt]

Hi, I am using a combination of cloudflare workers and sveltekit along with supabase to build my project. It runs on sveltekit without any issues. However, I hit an issue when running a simple supabase query on cloudflare.

Its showing an error in cross-fetch but shows require not define instead of XMLHttpRequest error.

I have also tried to patch cross-fetch (as mentioned in supabase-cloudflare-example) but no luck there. I have noticed that storage-js uses 3.1.4 of cross-fetch whereas postrest-js and gotrue-js uses 3.0.6 of cross-fetch. This makes it difficult to apply the patch.

I have also tried to use kit.vite.resolve.alias {"cross-fetch": "fetch"} setting within svelte.config.js (based on what was done with webpack as per this discussion. But no luck there.

I have raised a bug under supabase-js repo with all the details.

Any help/workaround will be appreciated.

[inian]

Hi @bhvngt, have not used Svelte Kit myself but can you override cross-fetch to use fetch. If it has a webpack config, you can do that via externals as shown here.

Also would it help if we upgrade gotrue-js to v3.1.4 of cross-fetch? That would be a simple fix to do.

[soedirgo]

Apparently this is fixed in JakeChampion/fetch#967, but we'll have to wait for github/fetch to make a new release, and then cross-fetch to make a new release.

[bhvngt]

Thanks @inian and @soedirgo for your reply. I spent a few hours to debug this issue. In my current setup where I am using sveltekit with cloudflare-worker-adapter, adapter is using esbuild to bundle the app. While bundling, both cross-fetch and node-fetch is getting bundled up and are used during runtime instead of native fetch offered by the environment.

I tried external option of esbuild, but that does not help as it retains require("cross-fetch") and expect that to be available in the environment. It does not map it to "fetch" like what webpack apparently does.

Would anyone have any idea around how to fix this?

@inian upgrading v3.1.4 will not make a difference as the same issue happens when version is upgraded to v3.1.4.

[bhvngt]

Finally got some success here. adapter-cloudflareworkers is using node as the platform while using esbuild. This is making "cross-fetch" pick 'node-ponyfill' and subsequently "node-fetch".

Changing the platform to browser and applying cross-fetch patch fixes the issue.

Will need to figure out if there is any particular reason to use node as a platform for esbuild with cloudflare-worker-adapter from sveltekit team.

Also it will be cleaner if there was a way to override cross-fetch to use fetch with esbuild. Then I wont have to apply cross-fetch patch