CODEWITHSUNDEEP
vue.jssupabasenuxt3.js
Nick Schnee
Nick Schnee

Reputation: 11

supabase + nuxt3 = Multiple GoTrueClient instances detected in the same browser context

I'm getting the warning Multiple GoTrueClient instances detected in the same browser context. It is not an error, but this should be avoided as it may produce undefined behavior when used concurrently under the same storage key. when using supabase in nuxt3 on localhost.

To isolate the bug, I stripped everything out of my project, except the index.vue, which now has the following content:

<template>
  <div class="">

  </div>
</template>

<script setup>
const supabase = useSupabaseClient();

</script>

Although there can be clearly just one instance of supabase, the warning persists. When I comment out the const supabase line, the warning disappears.

I built a whole app despite the warning, because CRUD operations worked flawlessly nonetheless. However, I wanted to add auth (e-mail) in the end, but then either the auth (no user variable is saved in localstorage) or the db (selecting from db just returns nothing, no error) stopped working.

E.g. when both functions below are present in index.vue, either authentication or CRUD operations don't work. (Yes, this behavior seems very funny to me too.)

const user = useSupabaseUser();
const supa = useSupabaseClient();

Because it might somehow be connected to incompatible versions of @supabase/gotrue-js, @supabase/supabase-js and / or nuxt3, here my package.json:

  "dependencies": {
    "@nuxtjs/google-fonts": "^3.0.2",
    "@supabase/gotrue-js": "^2.29.0",
    "@supabase/postgrest-js": "^1.7.2",
    "@supabase/supabase-js": "^2.31.0",
    "axios": "^1.4.0",
    "nuxt": "^3.6.5",
    "nuxt-icons": "^3.2.1",
    "nuxt3": "^3.7.0-28181370.2540c879",
    "uuid": "^9.0.0"
  }

Any help would be greatly appreciated because I really can't wrap my head around this.

Upvotes: 0

Views: 931

Answers (1)

Nick Schnee
Nick Schnee

Reputation: 11

The problem was that I had installed two different npm-packages for supabase, namely @nuxtjs/supabase (the nuxt3-supabase-package) as well as @supabase/supabase-js (supabase's default js-client), this resulting in the warning. I kept only the nuxt3 client, which solved it.

Upvotes: 0

Related Questions