Nuxt•2mo ago

Setup uses useFetch request and hot update reports an error, causing the route to not jump normally

codesandbox: https://codesandbox.io/p/devbox/i18n-tg5twn?file=%2Fpackage.json%3A13%2C3-15%2C27

3 Replies

Hi @Robin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I apologize, but I cannot directly access or review code on external websites like CodeSandbox. However, I can provide some general guidance about using useFetch in Nuxt 3 based on the information in the knowledge sources. The issue you're describing where a hot update reports an error and prevents normal route navigation when using useFetch in the setup function could be related to a known bug that was fixed in Nuxt 3.8.1. According to the Stack Overflow post, there was an error in the framework that caused issues with caching and re-fetching data after receiving error responses from useFetch. To address this issue, you could try the following: 1. Update to the latest version of Nuxt (at least 3.8.1) if you haven't already. 2. If updating doesn't solve the problem, you might want to try using the lazy option with useFetch. This can help avoid issues during hot module replacement. Here's an example:

const { data, error, refresh } = await useFetch('/api/data', {
  lazy: true
})

const { data, error, refresh } = await useFetch('/api/data', {
  lazy: true
})

3. If you're using useFetch in a custom composable or wrapper function, make sure you're not awaiting it directly in the composable. Instead, follow the pattern described in the Nuxt documentation:

// Correct
function useCustomFetch() {
  return useFetch(/* ... */)
}

// Incorrect
async function useCustomFetch() {
  return await useFetch(/* ... */)
}

// Correct
function useCustomFetch() {
  return useFetch(/* ... */)
}

// Incorrect
async function useCustomFetch() {
  return await useFetch(/* ... */)
}

4. If the issue persists, you might want to consider using useAsyncData with $fetch instead of useFetch for more fine-grained control over the data fetching process. If none of these suggestions help, you may need to provide more specific details about your code and the exact error message you're seeing for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1345940207031287828> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

RobinOP•2mo ago

Anyone can help me out with this? Thank you🥹

Gaming

Programming

Setup uses useFetch request and hot update reports an error, causing the route to not jump normally

Did you find this page helpful?