Cannot find name 'useSupabaseClient'

[adolfusadams]

Version

@nuxtjs/supabase: v1.1.5
nuxt: v3.9.0

Description

When I run npm run dev I get the following error message on the page in the browser;

500 
useSupabaseClient is not defined

at _sfc_main.setup (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\app.js:32:23)
at callWithErrorHandling (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:193:18)
at setupStatefulComponent (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7538:25)
at setupComponent (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7499:36)
at renderComponentVNode (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:642:15)
at Module.ssrRenderComponent (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:91:10)
at default (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\nuxt\dist\app\components\nuxt-root.js:76:37)
at Module.ssrRenderSuspense (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:489:5)
at _sfc_ssrRender (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\nuxt\dist\app\components\nuxt-root.js:67:25)

Below is some additional information.

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/supabase": "^1.1.5",
    "nuxt": "^3.9.3",
    "vue": "^3.4.14",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@nuxt/ui": "^2.12.3",
    "@supabase/supabase-js": "^2.39.3"
  }
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxt/ui', '@nuxtjs/supabase'],
    supabase: {
    redirect: false
  }
})

My .env file has the correct Supabase credentials

.env

SUPABASE_URL="https://example.supabase.co"
SUPABASE_KEY="<your_key>"

app.vue

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>
<script setup lang="ts">
const client = useSupabaseClient()
</script>

default.vue

<template>
  <section class="flex items-center justify-between mb-10">
    <h1 class="text-4xl font-extrabold">Summary</h1>
    <div>
      <USelectMenu :options="transactionViewOptions" v-model="selectedView" />
    </div>
  </section>
  <section
    class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 sm:gap-16 mb-10"
  >
    <Trend
      color="green"
      title="Income"
      :amount="4000"
      :last-amount="3000"
      :loading="false"
    />
    <Trend
      color="red"
      title="Income"
      :amount="4000"
      :last-amount="3000"
      :loading="false"
    />
    <Trend
      color="green"
      title="Income"
      :amount="4000"
      :last-amount="3000"
      :loading="false"
    />
    <Trend
      color="red"
      title="Income"
      :amount="4000"
      :last-amount="3000"
      :loading="true"
    />
    <Trend
      color="red"
      title="Expense"
      :amount="4000"
      :last-amount="5000"
      :loading="false"
    />
    <Trend
      color="green"
      title="Investments"
      :amount="4000"
      :last-amount="3000"
      :loading="false"
    />
    <Trend
      color="red"
      title="Saving"
      :amount="4000"
      :last-amount="4100"
      :loading="false"
    />
  </section>
</template>

<script setup lang="ts">

  import { transactionViewOptions } from '~/constants';
  const selectedView = ref(transactionViewOptions[1]);

  const supabase = useSupabaseClient();

const { data, error } = await supabase
    .from('transactions')
    .select();
  console.log(error, data);
</script>

I did the following;

1. Made sure that the Supabase credentials (like the Supabase key and url) in the .env are correct.
2. Updated node to the current version which is 20.11.0.
3. Verified that the Supabase client is installed by using the npm list @supabase/supabase-js command. It showed the following;

├─┬ @nuxtjs/supabase@1.1.5
│ └── @supabase/supabase-js@2.39.1
└── @supabase/supabase-js@2.39.3

4. Restarting the development server.

The line with const client = useSupabaseClient() (in both the app.vue and default.vue pages) is producing the error message Cannot find name 'useSupabaseClient' in the vs code editor.

[Shooteger]

Remove your depedency "@supabase/supabase-js", why have you both, this an "@nuxtjs/..."?

For readability I would suggest, you define supabase in your nuxt.config outside like this:
... modules: [ '@nuxtjs/supabase', .... ], supabase: { redirect: false, }, ..

Now to the more important part. Did you configure your runtime environment correctly in your nuxt.config, as well are you using your supabase keys correctly?

Add this to your nuxt.config:
runtimeConfig: { public: { SUPABASE_URL: process.env.SUPABASE_URL, SUPABASE_PUBLIC_KEY: process.env.SUPABASE_KEY, }, SUPABASE_SERVICE_KEY: process.env.SUPABASE_SERVICE_KEY, },

And here my .env file:
SUPABASE_URL= SUPABASE_KEY= SUPABASE_SERVICE_KEY=

Here, the public is the public key, and the service key is the one with "service_rolesecret" which bypasses role security, so choose to your needs, which one you want to use later, only public anon or service key.

Then you should be able to just use: const user = useSupabaseUser(); or const supabase = useSupabaseClient(); without any problems in your components.

Now delete you lockfile and node_modules, install again (just to start clean with npm i or yarn ;)) and you should be good to go.

[adolfusadams]

Thanks @Shooteger for the update. I did exactly as you indicated but the error is still the same.

[openrijal]

I'm kinda on the same boat.

The useSupabaseClient() returns null so .auth doesn't work, but the useSupabaseUser() composable is fine.

[openrijal]

I can't tell why, but putting the <script> block above the <template> block works for me.