[🐞] Module `@supabase/supabase-js` has no exported member 'createBrowserClient'

[wanjohiryan]

Which component is affected?

Starters / CLI

Describe the bug

Hello there 👋🏾

Am using your package supabase-auth-helpers-qwik and I keep getting the error:

The requested module '/node_modules/.pnpm/@supabase+postgrest-js@1.15.7/node_modules/@supabase/postgrest-js/dist/cjs/index.js?v=03dfba6d' does not provide an export named 'default'

On more investigation, i realised you are using @supabase/supabase-js which no longer comes with createBrowserClient.

Module '"@supabase/supabase-js"' has no exported member 'createBrowserClient'

Could you try using @supabase/ssr instead?

EDIT: After looking at your code, i understand why you are using @supabase/supabase-js. However, the browserClient error still persists.

PS: createServerClient works okay for me

Reproduction

none

Steps to reproduce

1. Start a new qwik project
2. Add supabase qwik helper(s) pnpm add @supabase/supabase-js && pnpm add -D supabase-auth-helpers-qwik supabase-auth-helpers-qwik will only work if it is a dev dependency

3. Then try creating a browserClient like so:

   import { createBrowserClient } from '@supabase/auth-helpers-remix';
   import { useVisibleTask$ } from '@builder.io/qwik';
   
   useVisibleTask$(() => {
   const supabaseClient = createBrowserClient(
    import.meta.env.PUBLIC_SUPABASE_URL,
    import.meta.env.PUBLIC_SUPABASE_ANON_KEY
   );
   
   const getData = async () => {
    const { data: supabaseData } = await supabaseClient.from('test').select('*');
   
     console.log({ data });
   };
   
   getData();
   }, []);

   PS: Don't forget to configure the env variables accordingly.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (2) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 2.60 GB / 5.79 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.4.0 - ~/.local/share/pnpm/pnpm
    bun: 1.1.18 - ~/.bun/bin/bun
  npmPackages:
    @builder.io/qwik: ^1.5.7 => 1.5.7
    @builder.io/qwik-city: ^1.5.7 => 1.5.7
    @builder.io/qwik-react: 0.5.0 => 0.5.0
    typescript: 5.4.5 => 5.4.5
    undici: * => 6.19.2
    vite: ^5.2.10 => 5.3.2

Additional Information

I could open a PR, it will take a minute. I think 😅

[wanjohiryan]

I have tried using raw createClient like so:

import { createClient } from "@supabase/supabase-js";

const supabaseClient= createClient(
    import.meta.env.PUBLIC_SUPABASE_URL,
    import.meta.env.PUBLIC_SUPABASE_ANON_KEY,
)

//...component wrapper goes somewhere here
useVisibleTask$(() => {

   const getData = async () => {
     const { data: supabaseData } = await supabaseClient.from('test').select('*');

      console.log({ data });
    };

    getData();
  }, []);
 //....more component code here

And it works now. I wonder why? 🤔