nuxt-modules / supabase

Supabase module for Nuxt.
https://supabase.nuxtjs.org
MIT License
680 stars 124 forks source link

Nuxt 3/Supabase error #419

Open adolfusadams opened 4 days ago

adolfusadams commented 4 days ago

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>
th1m0 commented 13 hours ago

@adolfusadams The types for useSupabaseClient or any other function from the module or any other module are generated inside the .nuxt folder. These types will generate after installing dependencies or after running the dev command. You can also manually generate it by running npx nuxi@latest prepare. Please let me know if this fixes your issue.