Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error thrown `nuxt instance unavailable`, when use `useState` after `useFetch` in composable

See original GitHub issue

Environment

Operating System: Darwin
Node Version: v16.13.0
Nuxt Version: 3.0.0-rc.3-27538180.cad4edd
Package Manager: npm@8.7.0
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

https://stackblitz.com/edit/github-cibhp2-szhe5i?file=composables%2Ffetch-data.ts

export const useStateBeforeUseFetch = async () => {
  const { data } = await useFetch('/api/test');
  const state = useState('test');
};

Describe the bug

when I use useState after async useFetch , error was thrown nuxt instance unavailable

Additional context

No response

Logs

[nitro] [dev] [unhandledRejection] Error: nuxt instance unavailable
    at Module.useNuxtApp (file:///home/projects/github-cibhp2-szhe5i/.nuxt/dist/server/server.mjs:408:13)
    at Module.useState (file:///home/projects/github-cibhp2-szhe5i/.nuxt/dist/server/server.mjs:948:38)
    at Module.useStateBeforeUseFetch (file:///home/projects/github-cibhp2-szhe5i/.nuxt/dist/server/server.mjs:3089:39)

Issue Analytics

State:
Created a year ago
Comments:16 (5 by maintainers)

Top GitHub Comments

12reactions

uuf6429commented, Jul 7, 2022

I’m having this same problem and on top of @hermesalvesbr, I have to say the composable functionality is extremely frustrating with only a very slim chance of usage.

At this point I don’t even know the point behind composables anymore - the documentation says it’s to make things easier and avoid boilerplate - but instead we ended up with more complicated and fragile code. On top of this, it seems to me that we are slowly getting composable-only features.

This may sound a bit of a rant (and it is really), I’ve spent a few days trying to get some functionality to work and instead it’s jumping back and forth between component hooks and setup composables.

Anyway, I just want to say that (1) there is real frustration behind these “features” and (2) you can see this from end users. So maybe it’s still a good time to go one step back and rethink it a bit.

4reactions

danielroecommented, Jul 9, 2022

@uuf6429 Thank you for your thoughts.

Rest assured, making things better and more intuitive is top of my mind.

You may find the following helpful in terms of understanding how Vue composables work, and what their limitations are - particularly note the Usage Restrictions section: https://vuejs.org/guide/reusability/composables.html#composables.

Top Results From Across the Web

nuxt instance unavailable · Discussion #1142 - GitHub

useFetch is a composable meant to be used at the top level, not called in a function. Instead, just use $fetch.

Nuxt Instance Unavailable throw error - StackBlitz

Ports in use. Settings. Switch to Light Theme. Enter Zen Mode ... Nuxt Instance Unavailable throw error ... With a Pro Account you...

nuxt 3 useFetch() returns the error fetch failed() - Stack Overflow

I have tried useFetch and useLazyFetch composable to fetch the data but both returns the same error when we reload the page.

Using Modules and Pinia to structure Nuxt 3 app

Nuxt 3 example. Now, that we know what the modules are, let's dive in into the code to see how we can utilize...

useCookie · Nuxt Composables

Within your pages, components and plugins you can use useCookie , an SSR-friendly composable to read and write cookies. const cookie = useCookie(name, ......