Lets make it work directly in the browser (full es module version)

[daKmoR]

Bug report

Describe the bug

I wanted to give this a quick try and assumed that the es module version works in the browser

To Reproduce

1. Create an 👉 index.html file

<script type="importmap">
  {
    "imports": {
      "@supabase/functions-js": "./node_modules/@supabase/functions-js/dist/module/index.js",
      "@supabase/gotrue-js": "./node_modules/@supabase/gotrue-js/dist/module/index.js",
      "@supabase/postgres-js": "./node_modules/@supabase/postgres-js/dist/module/index.js",
      "@supabase/realtime-js": "./node_modules/@supabase/realtime-js/dist/module/index.js",
      "@supabase/storage-js": "./node_modules/@supabase/storage-js/dist/module/index.js",
      "@supabase/supabase-js": "./node_modules/@supabase/supabase-js/dist/module/index.js"
    }
  }
</script>

<script type="module">
  import { createClient } from "@supabase/supabase-js";
  console.log(createClient);
</script>

2. server it with any webserver (npx http-server, apache, nginx...)
3. open it in the browser (chrome - for import maps support)

Expected behavior

Logs createClient implementation

Actual behavior

GET http://127.0.0.1:8080/node_modules/@supabase/realtime-js/dist/module/RealtimeClient net::ERR_ABORTED 404 (Not Found)       index.js:1
GET http://127.0.0.1:8080/node_modules/@supabase/realtime-js/dist/module/RealtimeChannel net::ERR_ABORTED 404 (Not Found)      index.js:2             
GET http://127.0.0.1:8080/node_modules/@supabase/realtime-js/dist/module/RealtimePresence net::ERR_ABORTED 404 (Not Found)     index.js:3             
GET http://127.0.0.1:8080/node_modules/@supabase/gotrue-js/dist/module/lib/helpers net::ERR_ABORTED 404 (Not Found)            GoTrueAdminApi.js:22   
GET http://127.0.0.1:8080/node_modules/@supabase/gotrue-js/dist/module/lib/fetch net::ERR_ABORTED 404 (Not Found)              GoTrueAdminApi.js:21   
GET http://127.0.0.1:8080/node_modules/@supabase/gotrue-js/dist/module/lib/errors net::ERR_ABORTED 404 (Not Found)             GoTrueAdminApi.js:23   
GET http://127.0.0.1:8080/node_modules/@supabase/gotrue-js/dist/module/lib/constants net::ERR_ABORTED 404 (Not Found)          GoTrueClient.js:11     
GET http://127.0.0.1:8080/node_modules/@supabase/gotrue-js/dist/module/GoTrueAdminApi net::ERR_ABORTED 404 (Not Found)         GoTrueClient.js:10     

Ideas

the above suggests that in the source code there are imports like

import RealtimeChannel from './RealtimeChannel';

which is impossible to know for the browser what to load... .js?, .mjs? ... also a browser cannot do da http request for each possibility to check what is available...

e.g. we need to be more explicit... e.g. it should be

import RealtimeChannel from './RealtimeChannel.js';

Follup up Issues

if the local import paths are solved a separate issue pops up

Uncaught SyntaxError: The requested module './node_modules/cross-fetch/dist/browser-ponyfill.js' does not provide an export named 'fetch' (at index.html:2:12)

cross-fetch sadly does offer an es module version... I opened an issue

additionally also websocket seems to not offer an es module version...

so 2 dependencies we will need to "fix"

What do you think?

I would really like to use supabase directly in the browser without any tools or build steps 🤗 Also, I think with a few small changes and some updates/or different dependencies it should be possible to get this 🙏

If that is something you would like to support then I could certainly help make it happen 🤗

System information

• OS: macOS [e.g. macOS, Windows]
• Browser: chrome (if applies) [e.g. chrome, safari]
• Version of supabase-js: 2.2.1
• Version of Node.js: 18

[steve-chavez]

I would really like to use supabase directly in the browser without any tools or build steps

I think this tutorial might help: Supabase - Back to the Basics(video).

It uses plain <script> tags to load all supabase frontend libs, no build steps.

[Matsuuu]

Reviving this one (Hi @daKmoR 👋🏼 ).

Fiddled around today with Supabase for the first time and noticed that it indeed isn't runnable natively in the browser. The packages I found were the culprit were the same ones as Dakmor has sited there.

I did some small adjustments to the @supabase/node-fetch and removed dependency on the websocket package from @supabase/realtime-js and was able to get my browser client connecting to supabase without requiring a build step.

I'll be opening up a PR on both of the projects to start up some discussion and see if we could get these shipped so I could start using this tool

[Matsuuu]

I've submitted 2 PR's to projects hosted by supabase. One is just a small code fix, the other one is a slightly larger fix with a dependency swap, but they both should function, and I've tested them locally on my supabase installation.

Would love if someone could take a look at them

[Matsuuu]

This is now functional and shipped with the latest Supabase libs!

I've not tested around all of supabase packages, but it should work now