Nuxt 3 static on netlify - error 500 when reloading page

Support
,
1

Hi,

I am working on a static generated website. Everything is ok on local, everything seemed ok when deployed on netlify but i found out that I get a 500 error when i reload a page that used a useFetch call to an api, then passed the result to a component by a prop. This error also happens when i access directly the concerned url from the borwser. It doesn’t happen when i navigate within the webiste using the nuxt-links.

ou can see the problem when reloading this page https://stately-pegasus-f69847.netlify.app/guide-des-tailles

Here is the code of the page containing the component:

<template>
<NuxtLayout name="default">
    <section>
        <HelpersHeading tag="h1" fontStyle="h1">Guide des tailles</HelpersHeading>
        <p class="mb-8">Nos vêtements et accessoires sont imprimés à la demande, il est donc important de bien vérifier les dimensions correspondant à votre taille avant de passer commande. Ceci afin d'éviter un long processus de renvoies et de réimpression. Merci de votre compréhension!</p>
        <Test :productTypesData="productTypes.data"></Test>
    </section>
</NuxtLayout>
</template>

<script setup>

    const config = useRuntimeConfig();

    const { data: productTypes } = await useFetch(`${config.API_URL}api/product-types`);

</script>

and here is the code of the Test component:

<template>
    <span>{{ productTypesData.length }}</span>
</template>
<script setup>

    const props = defineProps({
        productTypesData: Object
    })

</script>

Has anyone already experience this problem?

Thanks!

2

Hi Halop -

I am having the same issue, but, after poking around a bit, I don’t think this is a problem specific to Netlify, but a larger issue in Nuxt 3/Vue 3.

Have you tried building the site outside of the Netlify environment - i.e., run the build script on your development machine and locally run the resulting code? When I did this I got the same result on my local host as the Netlify results. On further research, I found a number of posts for this happening in standard Nuxt 3/Vue 3 builds. It seems to be related to the vue-loader but I haven’t found the work around for Nuxt 3, which, as we know, manages the routing differently.

Maybe someone can point us in the right direction to fix this…

Best - Tom K

1 Like
3

Hi Again -

I think I found how to make it work, at least for me. The problem seems to be when delivers the page the first time, the data from the useFetch call isn’t available so it breaks down (even using await to get the data - I tried it with suspense as well). I refactored my app to use Pinia to establish an initial state for the variables being fed from the Fetch call - having non-defined value for “:productTypesData” in your code, for example, causes Nuxt to determine there is no default initial page. By adding an initial state for this variable, even if it’s empty, it allows Nuxt to build the page on loading then populating the needed data as it comes in (I had the fetch data pulled into a const which is set as the value in a ref() variable.

Basically, use a state manager to set an initial value for the fetched data and have Nuxt refresh it when the results are available.

Hope this helps.

1 Like
4

Hi Tom,

thanks for this solution! Finally i went to nuxt 2 that works perfectly. i will wait a few months when nuxt 3 stable will be released to update my site. Another problem i had is that on android the content doesn’t load att all…

Cheers

Fred

5

Thanks for sharing that solution, @tfpkiii! @halop, glad to hear this got you on the right track.