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>

[th1m0]

@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.

[adolfusadams]

Thanks for the assistance but running npx nuxi@latest prepare unfortunately did not work. I have, however, noticed that when install Nuxt 3, I get the following deprecation errors during the installation.

✔ Which package manager would you like to use?
npm
◐ Installing dependencies...                                                                                                                                 2:39:18 PM
npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated [email protected]: This package is no longer supported.
npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: This package is no longer supported.
npm warn deprecated [email protected]: This package is no longer supported.

Please note that I am running node version 20.17.0 and I installed the Nuxt/Supabase module by using the npx nuxi@latest module add supabase command as per the Nuxt/Supabase module documentation.

[th1m0]

I have tried your reproduction step by step but I can't seem to reproduce it. Can you please try and reproduce your issue in here:

https://codesandbox.io/p/devbox/crazy-jennings-6txqm5?workspaceId=d17145ab-1f99-470c-b3f9-93423c05cc71

It already has everything you described in this issue. Please fork it and link it here again if you managed to reproduce it there.

[adolfusadams]

I tried accessing your codesandbox but ran into the issue as shown in the attached screenshot.

[th1m0]

Strange! Here is a new URL: https://codesandbox.io/p/devbox/crazy-jennings-6txqm5?workspaceId=d17145ab-1f99-470c-b3f9-93423c05cc71

[adolfusadams]

Thanks @th1m0. I am now able to access it. There are two things I observed when Nuxt is upgraded; 1) deprecation errors are displayed during the upgrade and 2) other errors are displayed in the terminal after the upgrade of Nuxt.

Please see attached video screenshot https://1drv.ms/i/c/940a1f90b4950c0b/EZSzRUNEibxFtH_WZLTH7RcBb_O1J7HicOmPImXE5tnfgA?e=lDbDd3

[L422Y]

I am having a similar issue - some types are generated inside of .nuxt/types/supabase.d.ts:

declare module '#supabase/server' {
  const serverSupabaseClient: typeof import('/Users/larry/Development/test/client-debug/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@nuxtjs/supabase/dist/runtime/server/services').serverSupabaseClient
  const serverSupabaseServiceRole: typeof import('/Users/larry/Development/test/client-debug/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@nuxtjs/supabase/dist/runtime/server/services').serverSupabaseServiceRole
  const serverSupabaseUser: typeof import('/Users/larry/Development/test/client-debug/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@nuxtjs/supabase/dist/runtime/server/services').serverSupabaseUser
  const serverSupabaseSession: typeof import('/Users/larry/Development/test/client-debug/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@nuxtjs/supabase/dist/runtime/server/services').serverSupabaseSession
}

however .nuxt/imports.d.ts does not have the exports that i have in a working project, i was expecting these but they are missing from my project with updated dependencies:

export { useSupabaseClient } from '../node_modules/@nuxtjs/supabase/dist/runtime/composables/useSupabaseClient';
export { useSupabaseSession } from '../node_modules/@nuxtjs/supabase/dist/runtime/composables/useSupabaseSession';
export { useSupabaseUser } from '../node_modules/@nuxtjs/supabase/dist/runtime/composables/useSupabaseUser';

To be clear, the composables/files are there, but the above lines are missing from .nuxt/imports.d.ts