supabase icon indicating copy to clipboard operation
supabase copied to clipboard

Upgrade @nuxtjs/supabase from 0.3.x to 1.0.x: 500 error on initial page load

Open bfgpab opened this issue 2 years ago • 0 comments

My page is showing elements based on "user" (like 'Sign in' button). Before upgrade to v1 it was working just fine. After upgrading I get 500 error on initial page load or page refresh. If I navigate the page from menu, it works fine again. If I turn SSR to FALSE in Nuxt config it works fine. It seems that useSupabaseUser() is not available during render? I am working on localhost.

<template>
<header>
<UButton title="Sign in" to="/signin" v-if="!user && route.name != 'signin'" />
</header>
</template>

<script setup>
const route = useRoute();
const user = useSupabaseUser();
</script>

My package.json

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxthq/ui": "^2.7.0",
    "@nuxtjs/html-validator": "^1.5.2",
    "@nuxtjs/i18n": "^8.0.0-rc.3",
    "@nuxtjs/supabase": "^1.0.2",
    "nuxt": "^3.7.0"
  },
  "dependencies": {
    "@vuelidate/core": "^2.0.3",
    "@vuelidate/validators": "^2.0.4",
    "vue": "^3.3.4"
  }
}

Error message: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#using-vue-and-nuxt-composables

bfgpab avatar Sep 06 '23 11:09 bfgpab