Topics

Nuxt•2y ago

Nuxt 3 with Pinia gives me error 500

Whenever I import my store to a page/layout/component, I'm getting a 500 error ([Vue Router warn]: uncaught error during route navigation: error: nuxt instance unavailable) on initial load. On my error page, I have a home button (const handleClearError = () => clearError({ redirect: '/' }) which brings me back to the main page. Strangely, I can press this button and everything (including the Pinia store) works perfectly. The problem is just the initial page load (problem occurs every time I refresh the browser page). In short: On whatever layout/page/component I import import { useUserStore } from '~~/stores/user';, this problem will occur on page load. While installing Pinia, I just followed the documentation (https://pinia.vuejs.org/ssr/nuxt.html). I read somewhere else that there is a problem with npm and Pinia right now so I tried to install the pinia/nuxt dev + normal dependency with yarn and npm. Same problem every time. Is this a known issue with Nuxt 3 + Pinia or am I missing something here?

No description

28 Replies

Fabian B.•2y ago

Is the @pinia/nuxt package registered in the modules array in the conig? And could you show us the store file? I am using nuxt3 and pinia on multiple projects, and with ssr, and it works fine.

erztemplerobbaOP•2y ago

Yes, it's registered

export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase', ['@pinia/nuxt', {
    autoImports: [
      // automatically imports `defineStore`
      'defineStore', // import { defineStore } from 'pinia'
      // automatically imports `defineStore` as `definePiniaStore`
      ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
    ],
  }], '@nuxtjs/tailwindcss', '@nuxt/content'],

export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase', ['@pinia/nuxt', {
    autoImports: [
      // automatically imports `defineStore`
      'defineStore', // import { defineStore } from 'pinia'
      // automatically imports `defineStore` as `definePiniaStore`
      ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
    ],
  }], '@nuxtjs/tailwindcss', '@nuxt/content'],

The autoImports: [] was added later on. The problems occurs both when I manually define the store or auto import it.

No description

Fabian B.•2y ago

That’s interesting… let me compare that to my working repo, maybe I’ll find something. But by the looks everything looks well implemented.

erztemplerobbaOP•2y ago

Thank you very much!

Fabian B.•2y ago

Could you maybe also show an example on how this store is used in a component/page?

erztemplerobbaOP•2y ago

I've tried using it within my script setup and in the template.

<template>
  <div class="max-w-lg mx-auto mt-8">
  {{ store.user }}
    <form
      @submit.prevent="() => (isSignUp ? signUp() : login())"
      class="flex flex-col gap-2 mt-16"
    >

<template>
  <div class="max-w-lg mx-auto mt-8">
  {{ store.user }}
    <form
      @submit.prevent="() => (isSignUp ? signUp() : login())"
      class="flex flex-col gap-2 mt-16"
    >

const login = async () => {
  try {
    isLoggingIn.value = true
    const { data: { user }, error } = await client.auth.signInWithPassword({
    email: email.value,
    password: password.value
  })
    if(error) throw error
    if(supabaseUser) supabaseUser.value = user
    await store.saveProfileInStore(user?.id)
  } catch (error) {
    console.log(error)
  } finally {
    isLoggingIn.value = false
  }
}

const login = async () => {
  try {
    isLoggingIn.value = true
    const { data: { user }, error } = await client.auth.signInWithPassword({
    email: email.value,
    password: password.value
  })
    if(error) throw error
    if(supabaseUser) supabaseUser.value = user
    await store.saveProfileInStore(user?.id)
  } catch (error) {
    console.log(error)
  } finally {
    isLoggingIn.value = false
  }
}

Even when I don't use the store, the error occurs. This line import { useUserStore } from '~~/stores/user'; is enough to break it somehow. These are the 2 instances in my login.vue page

[Vue warn]: Unhandled error during execution of setup function at <Anonymous key="default" name="default" hasTransition=false >

This is another error that i get in my terminal whenever i import the useUserStore

Fabian B.•2y ago

I suppose you’re doing const store = useUserStore() in the root level of the <script setup> right? Does the <template> have multiple tags directly inside? Or is there a <div> for example that wraps them all?

erztemplerobbaOP•2y ago

Yes, the first lines are :

<script setup lang="ts">
import { useUserStore } from '~~/stores/user';
import useAuthUser from '../../composables/UseAuthUser'

const { user: supabaseUser } = useAuthUser()
const store = useUserStore()
const client = useSupabaseClient()

<script setup lang="ts">
import { useUserStore } from '~~/stores/user';
import useAuthUser from '../../composables/UseAuthUser'

const { user: supabaseUser } = useAuthUser()
const store = useUserStore()
const client = useSupabaseClient()

<template>
  <div class="max-w-lg mx-auto mt-8">

<template>
  <div class="max-w-lg mx-auto mt-8">

this is the beginning of the template. after that, the login form follow

Fabian B.•2y ago

Could you try importing it in a different way? So maybe as an absolute path, like you do for useAuthUser So there is only one div directly under template, right? Otherwise, could you try creating a new blank page Vue component and doing nothing but importing and using the store? Since i don’t see any issues from your code, i think it could have to do with something installed in your codebase/on your page. Since when I would now create a fresh new nuxt project and add Pinia to it, it all works.

Fabian B.•2y ago

Those are my dependencies for my working project:

No description

erztemplerobbaOP•2y ago

i'll try a blank page i see you have both @pinia/nuxt and pinia installed as a dependency i got @pinia/nuxt as dev dependency

Fabian B.•2y ago

Yeah devDependencies and dependency are almost the same on modern frontends, but sometimes it can make a difference.

erztemplerobbaOP•2y ago

<template>
  <div>
    <p>lol</p>
  </div>
</template>

<script setup>
import { useUserStore } from '../../stores/user';
</script>

<template>
  <div>
    <p>lol</p>
  </div>
</template>

<script setup>
import { useUserStore } from '../../stores/user';
</script>

This page alone breaks it nothing else in it I'll take your package.json and play around with the versions for a bit Did you install your pinia deps with yarn or npm?

Fabian B.•2y ago

I installed all with npm. Yeah maybe try to install the exact same versions I have of both packes Because that’s very interesting, if the fresh new page also breaks it

erztemplerobbaOP•2y ago

deleted node_modules/ package-lock.json, installed all pinia/nuxt and pinia with exactly your versions and still got the error O_O. Would you mind sending me your package.json so I can install exactly your app and see if it still breaks?

Fabian B.•2y ago

Maybe also delete the .nuxt folder completely That’s strange 😄

Fabian B.•2y ago

That's my full package.json

package.json

Fabian B.•2y ago

Thats my store definition

useCurrentUserStore....

Fabian B.•2y ago

This is an example vue component where I use it, which works

UserFollowButton.vue

Fabian B.•2y ago

Here's the full repo https://github.com/madebyfabian/zingio

erztemplerobbaOP•2y ago

Yep, that toally works Probably a dependency issue with some other library? Can't really think of anything else

Fabian B.•2y ago

Nice, so it works after deleting the .nuxt folder? Yeah I also think it’s that. some bug which caused nuxt not to generate its files properly

erztemplerobbaOP•2y ago

The fresh install with your package.json works. deleting .nuxt and node_modules unfortunately didn't fix my app I guess I'll just have to install each lib one by one and see when it breaks to find the culprit

Fabian B.•2y ago

Alright, glad it works now. Would be interested which package causes this, let me know if you find out

erztemplerobbaOP•2y ago

Found it! const supabase = useSupabaseClient() using the supabase client in the store or importing it from another js module 500s the app Do you think that's some kind of issue with SSR? I'm using exactly the same setup in a Quasar app (client side rendingering) where I use Supabase queries in my Pinia store and everything works fine.

Fabian B.•2y ago

Ah interesting. Yeah I think that's an SSR error. Since the useSupabaseClient is client-side only. On server-side there is a different method and you have to pass the server event into the method. What you could do here is ensure that your page is a SPA, or that your component is wrapped in <ClientOnly>. Do you need it to be SSR? Or, what may fit better if you really need SSR, is to move that supabase call completely onto a /server/api/... route, and then call this route with $fetch in the client Like in this example: https://supabase.nuxtjs.org/usage/services/server-supabase-client

// server/api/libraries.ts
import { serverSupabaseClient } from '#supabase/server'
export default eventHandler(async (event) => {
  const client = serverSupabaseClient(event)
  const { data } = await client.from('libraries').select()
  return { libraries: data }
})

// server/api/libraries.ts
import { serverSupabaseClient } from '#supabase/server'
export default eventHandler(async (event) => {
  const client = serverSupabaseClient(event)
  const { data } = await client.from('libraries').select()
  return { libraries: data }
})

and on the client

const { data: { libraries }} = await useFetch('/api/libraries', {
  headers: useRequestHeaders(['cookie'])
})

const { data: { libraries }} = await useFetch('/api/libraries', {
  headers: useRequestHeaders(['cookie'])
})

erztemplerobbaOP•2y ago

Yeah that makes total sense. I moved the whole supabase query to my Login.vue <script setup> and send the fetched data to my Pinia store and everything works fine. That's a solution that works for me, I don't really insist on having that whole function in my Store 😄 I like the /server/api/route... way for my more sensitive supabase api calls. I'll read up on the server-side supabase functions, that sounds really interesting. So far, I've only been using supabase without SSR because the RLS is so convenient. thanks a lot for your help, fabian! really appreciated

Fabian B.•2y ago

@erztemplerobba Sure, glad I could helped. Yeah that's something I also had to find out a bit and maybe there are even better ways. But since nuxt3 and the nuxt3/supabase module is so relatively "brand-new", I think it just needs time to evolve some kind of best practices and standards.

Nuxt Community Chat Server

30KMembers

View on Discord

Want results from more Discord servers?

Add your server