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

jacob-8 commented 11 months ago

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: https://github.com/supabase/postgrest-js/issues/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

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 11 months ago

Start a new pull request in StackBlitz Codeflow.

mkilpatrick commented 11 months ago

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 commented 11 months ago

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. https://github.com/sveltejs/vite-plugin-svelte/issues/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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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

vitejs / vite