Nuxt 3/Supabase error

[adolfusadams]

When using Nuxt 3 with Supabse I get the following errors in the web app page, within the VS Code terminal and in the VS Code editor.

// VS Code editor error Cannot find name 'useSupabaseClient'

// VS Code terminal error ERROR Pre-transform error: [unimport] failed to find "useSupabaseSession" imported from "#imports"

// Web app page error

500
[vite-node] [plugin:nuxt:imports-transform] [VITE_ERROR] /node_modules/@nuxtjs/supabase/dist/runtime/plugins/supabase.server.js

import { createServerClient, parseCookieHeader } from "@supabase/ssr";
import { getHeader, setCookie } from "h3";
import { fetchWithRetry } from "../utils/fetch-retry.js";
import { defineNuxtPlugin, useRequestEvent, useRuntimeConfig, useSupabaseSession, useSupabaseUser } from "#imports";
export default defineNuxtPlugin({
  name: "supabase",
  enforce: "pre",
  async setup() {
    const { url, key, cookieOptions, clientOptions } = useRuntimeConfig().public.supabase;
    const event = useRequestEvent();
    const client = createServerClient(url, key, {
      ...clientOptions,
      cookies: {
        getAll: () => parseCookieHeader(getHeader(event, "Cookie") ?? ""),
        setAll: (cookies) => cookies.forEach(({ name, value, options }) => setCookie(event, name, value, options))
      },
      cookieOptions,
      global: {
        fetch: fetchWithRetry,
        ...clientOptions.global
      }
    });
    const [
      {
        data: { session }
      },
      {
        data: { user }
      }
    ] = await Promise.all([client.auth.getSession(), client.auth.getUser()]);
    useSupabaseSession().value = session;
    useSupabaseUser().value = user;
    return {
      provide: {
        supabase: { client }
      }
    };
  }
});

at /node_modules/@nuxtjs/supabase/dist/runtime/plugins/supabase.server.js

Version

// 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"
  },
  "dependencies": {
    "@nuxtjs/supabase": "^1.4.0",
    "nuxt": "^3.13.0",
    "vue": "latest",
    "vue-router": "latest"
  }
}

// nuxt.config.ts // https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ['@nuxtjs/supabase'],
  runtimeConfig: {
    public: {
      SUPABASE_KEY: process.env.SUPABASE_KEY,
      SUPABASE_URL: process.env.SUPABASE_URL,
    },
  },
})

// app.vue

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtWelcome />
  </div>
</template>

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