nuxt
Nuxt instance disappears after calling $fetch in a composable (nuxt instance unavailable)
Environment
- Operating System:
Windows_NT - Node Version:
v16.11.1 - Nuxt Version:
3.0.0-rc.6-27668034.5232c1b - Package Manager:
[email protected] - Builder:
vite - User Config:
vite - Runtime Modules:
- - Build Modules:
-
Reproduction
https://github.com/Luffyyy/nuxt-instance-bug https://stackblitz.com/edit/github-eh8ppf?file=composables/useTest.js
Describe the bug
I'm not super sure how to describe the bug, but in my main project I've had weird situations where a fetch request would run just fine and then another one would error with "nuxt instance unavailable". But I got it to a point it does something that is obviously not normal and allowing me to call anymore composables that rely on Nuxt instance.
Essentially running any composable that needs nuxt instance (useNuxtApp), fetch and then useNuxtApp again errors with "nuxt instance unavailable" which doesn't make any sense.
Additional context
No response
Logs
No response
Basically after an async operation, we no longer have access to the nuxt context (to avoid sharing state with other requests). Vue composables should almost always be synchronous, with a very few exceptions. In general you should get a reference NuxtApp at the beginning of your composable, and then consume/use it afterwards, rather than getting it at the point of use.
Nuxt does perform a transform for defineNuxtRouteMiddleware and defineNuxtPlugin to allow using nuxt composables after async operations, and Vue does the same within <script setup>. But those are the exceptions, not the rule.
I think this probably needs to be explained more clearly in the docs.
Thanks for the explanation, I generally only made fetch related composables async. I agree having some alert regarding this is a good idea.
If I need to use multiple composables to fetch few things through a pinia store (fetch a user then notifications for example), how would I go around that? Should I reference nuxt context there? As far as I see if I just call all of them through the middleware, all works fine, but if I try to call the store function it will fail. In general I use a middleware to initialize the store and fetch stuff like user and whatnot.
I found a solution: https://github.com/nuxt/framework/discussions/5655#discussioncomment-3047558 Perhaps stuff like this could be shown in the docs too? Though in general I can't but think that this could be better in the future for cases where we need to load things in stores.