Vite 4 to Vite 5 causes @supabase/node-fetch to use server module in browser - leads to global is not defined error

[jacob-8]

Describe the bug

I'm updating a SvelteKit project from Vite 4 to 5 and Supabase throws an error once the client hydrates global is not defined. I'm not sure if this is a Vite bug, a SvelteKit bug, or a Supabase bug. But it's a bug relating to how Vite chooses which server or browser file to serve up. For reference, in Vite 4, @supabse/node-fetch loads a browser version (browser.js) client-side:

But in Vite 5 it loads the server version (index.js) on the client thus causing the problem:

I've also posted this in Supabase: supabase/postgrest-js#465 - I hope it's just a simple issue of Supabase needing to update a few lines in how they define imports in a package.json.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-8hs1lt?file=package.json

Steps to reproduce

Works with Vite 4: https://stackblitz.com/edit/sveltejs-kit-template-default-tnrxgs?file=package.json
Doesn't work with Vite 5: https://stackblitz.com/edit/sveltejs-kit-template-default-8hs1lt?file=package.json

• Go to sveltekit.new
• npm i -D @supabase/supabase-js
• npm run dev
• import anything from @supabase/supabase-js and get error when the client hydrates.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.10.5 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^5.0.6 => 5.0.6

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• sveltejs-kit-template-default-8hs1lt (Open reproduction)
• sveltejs-kit-template-default-tnrxgs (Open reproduction)

[mkilpatrick]

I posted this link in the supabase issue, but it's most likely how they're incorrectly exporting in their package.json.

https://publint.dev/@supabase/postgrest-js@1.9.0

[bluwy]

Seems like this is a bug that you'd need the latest version (v3) of @sveltejs/vite-plugin-svelte to fix this, which SvelteKit doesn't use yet. The plugins v2 version only supports Vite 4. sveltejs/vite-plugin-svelte#808

I'd suggest waiting for SvelteKit to support Vite 5 first, or you can try overriding @sveltejs/vite-plugin-svelte to use the latest version. Or this workaround with this config for now:

// vite.config.js

	resolve: {
		mainFields: ['browser', 'module', 'jsnext:main', 'jsnext']
	}

[jacob-8]

I'd suggest waiting for SvelteKit to support Vite 5 first

@bluwy I sort of thought I might be jumping the gun. Sure, I'll just wait for SvelteKit to come along with support for Vite 5. Thanks for the quick answer!

[jacob-8]

I posted this link in the supabase issue, but it's most likely how they're incorrectly exporting in their package.json.

Thank you for doing that! I had not known of that tool before and hopefully that will also help improve things.

[jacob-8]

I can confirm that there is no bug when using Vite 5 with SvelteKit 2 and @sveltejs/vite-plugin-svelte v3 - https://stackblitz.com/edit/sveltejs-kit-template-default-x9ybq2?file=package.json