500 error on initial Nuxt3 load with Strapi call

Question

On initial load of my app I fire a call to strapi in index.vue. Template is here:

<template>

  <div v-for="(season, index) in seasons" :key="index">
    {{ season.attributes.year }} 
  </div>
    
</template>
<script setup>
  const { find } = useStrapi()
  const {  data: seasons } = await find('seasons')
</script>

The error on first load and refresh is:

Unhandled error during execution of setup function at
<Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >

GET http://localhost:3000/ 500 (Internal Server Error)

And the server responds with 500 on localhost.

After I dismiss the error, and reroute to "/" from error state, I see the data, it is refresh and first load issues.

My guess is that useStrapi function has to be fired maybe onMounted or something like that?? (but I want it handled by server side if possible)

This might be helpful as well. My nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@nuxtjs/strapi'
    ],
    strapi: {
        url: process.env.STRAPI_URL || 'http://localhost:1337',
        prefix: '/api',
        version: 'v4',
        cookie: {},
        cookieName: 'strapi_jwt'
    }
})

I'm new to composition API, so might be something I do not understand. If I make a useFetch call, on other API's (a deployed one, it works well), but on Strapi localhost I always get this issue.

Answer 1

I had the same problem. I fixed it by replacing localhost in the connection string with 127.0.0.1.