search

supabase / supabase-js

An isomorphic Javascript client for Supabase. Query your Supabase database, subscribe to realtime events, upload and download files, browse typescript examples, invoke postgres functions via rpc, invoke supabase edge functions, query pgvector.
https://supabase.com
MIT License
2.86k stars 220 forks source link

Isomorphism breaks due to Websockets when using SSR #155

Closed ixxie closed 3 years ago

ixxie commented 3 years ago

Bug report

Describe the bug

When importing createClient into a SvelteKit project, the following error is raised:

5:49:56 PM [vite] Error when evaluating SSR module /node_modules/websocket/lib/browser.js?v=f34fcf64:
Error: Could not determine global this
    at /node_modules/websocket/lib/browser.js?v=f34fcf64:7:28
    at instantiateModule (/home/ixxie/repos/minex/node_modules/vite/dist/node/chunks/dep-66eb515d.js:69030:166)

It seems to come from this block of code in the Websockets package.

To Reproduce

npm init svelte@next
npm install
npm install --save-prod @supabase/supabase-js
sed -i "s/<script>/<script>\n\timport { createClient } from '@supabase\/supabase-js';/" ./src/routes/index.svelte
npm run dev

Expected behavior

Import should work without error

Screenshots

If applicable, add screenshots to help explain your problem.

System information

Additional context

This was discovered after resolving https://github.com/supabase/supabase-js/issues/153, after which @kiwicopple recommended I create a new issue.

ixxie commented 3 years ago

I've now tried a similar minimal example using es5-ext/global directly and it seems the root of the issue is there. It seems this package is abandoned (not github activity for a year) and perhaps an alternative should be suggested to the websocket maintainers but I am not sure what it would be...

benmccann commented 3 years ago

Perhaps https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis could be used if it's available

ixxie commented 3 years ago

@benmccann this is what I suggested and this was already released into websockets@1.0.34 by its maintainer (see https://github.com/theturtle32/WebSocket-Node/issues/415).

kiwicopple commented 3 years ago

We originally used globalThis in gotrue and had to polyfill it: https://github.com/supabase/gotrue-js/issues/38

I find this a bit odd though, because our supabase-js client is isomorphic. We already use it in a node environment and it works fine 🤔

benmccann commented 3 years ago

Anyway, this issue seems fixed by websocket@1.0.34, so at most we'd need to upgrade package.json and then can close this

benmccann commented 3 years ago

I'm not sure if it's related to the globalThis issue, but once the globalThis issue is fixed I encounter another issue that seems to be a Vite bug: https://github.com/vitejs/vite/issues/2995

kiwicopple commented 3 years ago

OK I bumped to the latest. I'll leave this open if anyone can confirm the fix?

kiwicopple commented 3 years ago

:tada: This issue has been resolved in version 1.11.3 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

benmccann commented 3 years ago

Thanks! There's multiple issues left running Supabase with SvelteKit, but they're pretty clearly issues with Vite so we'll work on those in that repo. Thanks for all your help!