Error with cross-fetch in postgres-js & supabase-js

[kokecar11]

Bug report

• [x] I confirm this is a bug with Supabase, not with my own application.
• [x] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

I just upgraded to the latest Supabase-js package 2.33.1 when I try to use the api,

Uncaught (in promise) SyntaxError: The requested module '/node_modules/.pnpm/[email protected]/node_modules/cross-fetch/dist/browser-ponyfill.js?v=bd2992b8' does not provide an export named 'default' (at PostgrestBuilder.ts:1:8)

I uninstalled node_modules and tried to reinstall them and I still get the error, all when running supabase-js

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to '…'
2. Click on '…'
3. Scroll down to '…'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

System information

System: OS: macOS 13.5 CPU: (8) arm64 Apple M1 Pro Memory: 185.33 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm Browsers: Brave Browser: 116.1.57.47 Chrome: 116.0.5845.110 Safari: 16.6 npmPackages: @builder.io/qwik: ^1.2.8 => 1.2.8 @builder.io/qwik-city: ^1.2.8 => 1.2.8 @supabase/supabase-js: ^2.33.1 => 2.33.1 undici: 5.22.1 => 5.22.1 vite: 4.3.5 => 4.3.5

Additional context

Add any other context about the problem here.

[kokecar11]

With nextjs same issue please review and correct possible import errors

[soedirgo]

Seems like an issue on cross-fetch: https://github.com/lquixada/cross-fetch/issues/120#issuecomment-1617172860

Can you run npm up @supabase/postgrest-js and see if the error changes? We're about to replace cross-fetch with using node-fetch directly which can possibly fix this.

[soedirgo]

Also, can you share more of the logs from the Next.js/pnpm build?

[hash-bang]

@soedirgo - I'm also seeing this runtime error with the Vite framework.

What logs do you require exactly? Just a package-lock or something more specific?

[hash-bang]

To elaborate - I've got @supabase/supabase-js in a submodule that the main project is importing. This submodule works fine when linked instead of installed which may suggest the issue is one of the pre-deps for @supabase/supabase-js not importing the updated version of node-fetch?

[hash-bang]

Alright after some hair pulling I got this to play nice with Vite.

It looks like some of the modules need explicit aliasing otherwise Vite / ESBuild / Rollup seems to get confused and import the wrong file.

Merge this into vite.config.js:

import { defineConfig } from 'vite';
export default defineConfig(({mode}) => ({
	// ... presumably other existing config ... //
	resolve: {
		alias: {
			'cross-fetch': 'cross-fetch/dist/browser-ponyfill.js',
			'@supabase/node-fetch': '@supabase/node-fetch/lib/index.mjs',
			'websocket': 'websocket/index.js'
		},
	},
}));

[soedirgo]

@hash-bang I'm referring to the Import trace for requested module logs above - the actual error messages should be above it.

Do you have a repo where I could reproduce this issue? I'd like to make this work OOtB if possible.

[hash-bang]

@soedirgo after playing around a bit it looks like this only seems to be a problem when Supabase is a sub-dependency (i.e. project imports NPM which then imports Supabase).

I've set up a simple demo of us using Supabase here its using our in house wrapping NPM Vitel which gives us a thin wrapper around Supabase to handle some company specific things.

[soedirgo]

I don't see any relevant warnings in that demo. Am I missing a step?

In any case, does upgrading to supabase-js v2.33.2 help?

[hash-bang]

I assume you're doing the "Open in new Tab" thing then opening the console there?

If so that's, odd because its the first error that shows up for me:

One question though - if I'm right in assuming that node-fetch is the backend wrapper to ponyfill the fetch() API, is there a reason its not just falling back to using the native version for frontend imports if its already present?

Edit: I can also confirm that upping the sub-module to v2.33.2 has the same result - I've updated the demo link to reflect the new package-lock with that version.

[mikestopcontinues]

I'm having this problem too, with a Vite build. When we were still on cross-fetch, the alias hack worked for me. But it no longer does with @supabase/node-fetch.

[silentworks]

@mikestopcontinues please provide a GitHub repo with the reproduction of this issue. I tested the one @hash-bang provided above and cannot replicate the issue he is having either. It's also harder to download files off Stackblitz to run them locally to dig into the issue further.

[hash-bang]

@silentworks - apologies, I didn't know you had issues downloading the project.

Steps to reproduce:

1. Download the Stackblitz export
2. Run npm run dev
3. Navigate to page with the devtools console open to see the above error with node-fetch