Nuxt Instance Unavailable - Async Code in Vue and Nuxt with the Composition API (+ raffle 🎁)
Summary
TLDR在这段视频脚本中,主讲人讨论了一个常见的编程错误信息:'next instance unavailable',这通常与异步代码有关。视频首先提到了一个延长的抽奖活动,鼓励观众参与评论以赢取前往vew conf的免费门票。随后,主讲人通过一个演示应用程序,展示了如何引发和解决这个错误信息。他们解释了为什么这个错误会发生,以及如何在Vue 3和Knexus(一种状态管理库)中处理它。主讲人提供了多种解决方案,包括不使用异步权重、重新排列代码顺序、使用`call with KN`和`app.run with context`,以及启用实验性的`as context`选项。视频最后鼓励观众分享他们遇到这个错误时的解决方法,并提供了相关资源链接。
Takeaways
- 🌐 视频讨论了一个常见的错误消息 'next instance unavailable',通常与异步代码有关。
- 🎁 主持人宣布了一个抽奖活动,延长了一周,并邀请观众在评论区分享他们想参加 Vew Conf 的原因以及他们使用 Vew 或 Next.js 构建的项目。
- 🔍 主持人展示了如何触发 'next instance unavailable' 错误,并解释了它的含义以及如何修复。
- 🛠️ 为了演示错误,主持人创建了一个简单的应用程序,并故意引入了异步代码来触发错误。
- 📚 讨论了如何通过移动代码到不同的组件或使用不同的生命周期钩子来解决错误。
- 🔄 主持人提到了 Vue 团队成员 Anthony Fu 的博客文章,该文章解释了 Vue 中异步 composable 的工作原理。
- 👨🏫 主持人解释了为什么在 script setup 中使用异步代码时会出现问题,以及 Vue 是如何处理组件实例的。
- 🔧 提供了几种解决方案,包括重新排序代码、使用不同的生命周期钩子、使用 `runWithContext` 和 `callWith` 方法,以及启用实验性的 `useAsyncContext` 选项。
- 🔗 提到了 `useAsyncContext` 是一个实验性功能,它允许在所有嵌套的异步 composable 中使用原生的异步上下文。
- 🚀 最后,主持人鼓励观众在评论中分享他们如何处理这个错误,以及他们打算尝试哪些解决方案。
Q & A
什么是'next instance unavailable'错误信息,它通常在什么情况下出现?
-这个错误信息通常与异步代码有关,当Vue中的某个composable需要访问Vue实例的上下文,但是这个上下文不可用时,就会出现这个错误。这通常发生在使用script setup时,尤其是在异步函数和composable混合使用的情况下。
视频提到的'raffle'是什么,以及如何参与?
-视频中提到的'raffle'是一个抽奖活动,参与者需要在视频下方留言,说明为什么想去Vew Conf以及他们已经使用Vue构建了什么。然后,视频作者将在下周抽取一名获奖者,赠送免费门票。
视频作者提到了哪些方法来解决'next instance unavailable'错误?
-视频作者提到了多种解决方法,包括:避免在composables中使用异步代码,重新排列代码顺序使得composables在异步函数之前调用,使用`callWithKN`和`app.runWithContext`,以及启用Vue的实验性特性`useAsyncContext`。
如何使用`useAsyncContext`来解决'next instance unavailable'错误?
-在Vue应用中,可以通过在`createApp`函数中设置`useAsyncContext`为`true`来启用这个实验性特性。这将允许异步composables访问Vue实例的上下文,从而解决错误。
视频作者提到了`script setup`的局限性,具体是什么?
-`script setup`在顶层使用时可以很好地工作,因为它允许编译器执行一些特殊的处理来保持Vue实例的上下文。但是,当在`script setup`之外或者多层嵌套的composables中使用时,这种处理就不再有效,可能会导致`next instance unavailable`错误。
为什么`useAsyncContext`是一个实验性特性,它有什么潜在的问题?
-`useAsyncContext`是基于Node.js的`asyncLocalStorage`实现的,这意味着它目前只在Node.js环境中有支持。由于Vue和Nitro等框架尝试保持运行时的中立性,这个特性在其他运行时环境中可能无法工作,因此它被标记为实验性。
视频作者提到了TC39的提案,这个提案的目的是什么?
-TC39的提案旨在将`async context`作为一个语言原生特性引入到JavaScript中。这样,无论在哪个运行时环境中,只要支持JavaScript,`async context`就能正常工作,不再依赖于特定的平台如Node.js或Deno。
如何检查`useAsyncContext`是否在自己的项目中有效?
-可以通过在项目的CI/CD流程中启用`useAsyncContext`并进行测试来检查它是否有效。如果项目托管在像Cloudflare Workers这样的边缘或无服务器运行时上,并且使用Node.js,那么启用`useAsyncContext`可能会有效。
视频作者提到了`useKNApp`和`app.runWithContext`,这些API是如何帮助解决错误的?
-`useKNApp`可以用来获取Vue应用的实例,而`app.runWithContext`允许在特定的上下文中执行函数。通过将需要Vue实例上下文的composables包装在`app.runWithContext`中,可以确保这些composables不会丢失上下文,从而解决错误。
视频作者建议的测试策略是什么?
-视频作者建议使用CI/CD流程中的测试来捕捉像`next instance unavailable`这样的错误。如果没有CI/CD,作者还提到了一个关于在Vue中进行测试的视频,可以作为参考。
Outlines
😀 解决 'next instance unavailable' 错误
本段视频脚本介绍了一个常见的错误消息 'next instance unavailable',解释了它的含义,并提供了解决此问题的方法。视频开始时,主持人提到了上一个视频中的抽奖活动,由于Google和YouTube的一些问题,决定将抽奖延长一周。随后,主持人介绍了错误消息通常与异步代码有关,并展示了如何在一个示例应用程序中触发和修复此错误。通过将异步代码移动到一个可复用的composable中,展示了错误是如何发生的,并提出了一些解决方案,包括检查文档和理解错误的根本原因。
🔍 深入理解异步代码和组件实例
在第二段中,视频脚本深入探讨了为什么异步代码会导致 'next instance unavailable' 错误。解释了Vue组件实例如何在全局变量中存储,以及异步函数如何与此交互。提到了设计限制和composable的使用建议,即默认情况下不应使用异步。还讨论了Vue如何处理异步composable和代码,以及如何通过编译时魔术解决 'script setup' 中的问题。最后,提出了一些解决方案,包括重新排列代码顺序,使用 'app.runWithContext' 和 'callWithKN' 等方法。
🛠️ 使用不同的方法解决异步问题
第三段脚本继续讨论解决异步问题的不同方法。介绍了 'runWithContext' 和 'callWithKN' 这两种方法,它们可以帮助保持上下文不丢失,并且不需要显式传递给composable。此外,还提到了一个新的实验性功能 'asContext',它可以在不更改任何代码的情况下解决问题。解释了 'asContext' 是如何工作的,以及为什么它是实验性的。还提到了tc39的提案,该提案旨在将 'asContext' 作为JavaScript语言的一个原生特性引入。
🎉 总结和观众互动
在视频的最后部分,主持人总结了关于 'next instance unavailable' 错误的信息,包括如何触发此错误、如何预防以及几种不同的解决方法。提到了不立即使用异步权重、重新排列代码顺序、使用 'callWithKN' 和 'app.runWithContext',以及实验性的 'asContext' 选项。主持人鼓励观众分享他们是否遇到过这个错误,以及他们是如何解决问题的。此外,还提到了与Michael讨论的关于View和Teleports的最新D of View剧集,并邀请观众提出问题、建议和反馈。
Mindmap
Keywords
💡Arrow message
💡asynchronous code
💡composable
💡script setup
💡useAsyncData
💡Vue
💡error message
💡component instance
💡useHead
💡context
💡experimental feature
Highlights
介绍了常见的错误消息 'next instance unavailable' 及其含义。
解释了如何通过不同的方法来修复 'next instance unavailable' 错误。
提到了关于 'next instance unavailable' 错误的详细文档链接。
讨论了在 Vue 3 中使用 Composition API 时遇到的异步代码问题。
展示了如何在 Vue 应用中重现 'next instance unavailable' 错误。
解释了 Vue 3 中组件实例和异步函数之间的关联问题。
提到了使用 script setup 时编译器如何处理异步代码。
讨论了在 Vue 中使用异步代码时的设计限制。
提出了避免在 compose 中使用异步代码的建议。
提供了解决 'next instance unavailable' 错误的几种不同方法。
介绍了 'run with context' 和 'call with kn' 作为解决问题的方法。
讨论了使用 'useKNApp' 和 'as context' 实验性功能来解决错误。
解释了 'as context' 是如何工作的以及它为何是实验性功能。
提到了 TC39 提议将 'as context' 作为 JavaScript 的语言原语。
讨论了 'as context' 在不同运行时中的支持情况。
鼓励观众尝试 'as context' 并检查其在 CI/CD 中的效果。
提供了一个总结,概述了 'next instance unavailable' 错误的相关信息和解决方法。
Transcripts
hey everybody welcome back to another
video on this channel and today we'll
talk about the very common Arrow message
next instance unavailable I know it can
be horrible but let's see what it means
how to fix it and let's get rid of it
right away here we
[Music]
go before we dig into that Arrow message
and what it means you remember maybe
some of you the last video there was a
raffle and I have to extend the raffle
for yet another week why because well
Google on YouTube there were some
problems with showing commands so yeah I
might have missed a comment or two from
one of you because they were not showing
up on the page that means you can
comment once again under this video also
on both that's fine I will just pick out
one entry per person uh with why you
want to go to viewon and what nice thing
you have built with you and or next
already just comment down below and then
next week the winner will be drawn for a
free ticket for vew confs so um if
that's your chance if you can travel to
the US on uh May 15 16 7s that's the way
to go it would be amazing to meet you
there and uh yeah good luck best of
success and let's jump to the the aror
message now and how all of that is about
asynchronous code and yeah as I said
before KNX inst is unavailable I guess
some of you have hit that already here
see a screenshot of that Arrow message
and we'll see it in a bit already um but
first of all let's figure out how to
provoke the error message and then work
on on how to fix it understand why it
actually happens as I mentioned it's a
lot about as code so let's dig into our
demo application and um break it and
then fix it our demo application is
pretty minimal as usual we have the KNX
config with the black white fix so just
a bit of styling and then we have our
aped view saying too here and to provoke
the error message is not that difficult
we need some asynchronous code so let's
start with awaiting some use Asing data
here and let's just return a new promise
which we will resolve IM immediately so
let's just put resolve in here and say
we resolve with one doesn't matter the
value and after that we want to call
some extra composable which also needs
next instance because otherwise would
say it's unavailable um and it say title
head is set so we see it in tab title
for sure that it's available and if we
save that right here and we switch to
the browser what will we see all fine it
works and actually that's expected
because well why should that code work
right so how can we break
it well let's move the whole code over
here from script setup in an extra
composable so even though I said yeah
you know if you only use it in one
component let's not extract it inline
composes and so on if you haven't seen
the video it's linked in this case let's
do that let's go to composable and say
use break
mecs and let's say okay we export the
default Asun function and call use break
me
all right and then we put the same code
we had before in here we Sav that in an
app. view we just call use break me all
right and if we save this now and check
out the website what we will see well
you guessed it already 500 KN a
composable that requires access to the
KN instance was called outside of a
plugin KN to KNX middleware VI setup
function this is probably not knb well
it's not find out more at this and this
whole documentation part explains pretty
well what uh View and KN composes are
what this next instance unavailable
means so it's worth checking that out
but I mean I'm also here to explain it
to you right so let's dig into it and to
start with why the error message happens
we should take a look at why exactly
this already happens in plain view as
well so let me let me show you one thing
let's move the things back into script
setup but without a setup so let's take
the content from use break me here and
let's remove that setup here and just
use the plain old setup function through
the options API right like this maybe
let's just do this and say we called it
a sunc setup so if we take that code and
we would refresh our page well we will
still see the same arrow with just a
different point to point at so the
problem is somewhat related to script
setup because there seems to work in
other files it doesn't and once again to
check out why this is the case let's
jump into how view handle Asing
composable and code then we understand
why the works script setup but not in
the rest and then we'll fix it the best
resource for that is the Asing with
composition API blog post from core team
member of vi v and KN Anthony Fu on his
personal website that explains very well
how the whole asynchron works under the
hood with View and the main point is
that even in view if you have some kind
of async
function and then have another
composable and you evaded ason function
you have a problem because view itself
needs a component instance right so in
here we see that pretty well let me Zoom
that bit in so we'll say okay we have
some instance right we set the instance
as a global variable and we don't want
to share that between the requests so we
have to delete it after calling the
setup right so it's like okay all right
get the instance call setup and then
restore a possible previous one if you
want to so that's how view mounts
component and how it stores that
instance in a global variable the
problem is though if we have some kind
of this well this doesn't really work
with asynchron right so as you all know
you've probably seen all these like
console log examples here's another
wonderful one showing that yeah um that
that won't work so we got not the result
we want here and this is more or less a
design limitation with composable so
it's not like that something is
fundamentally broken it's just something
something that has to be considered when
using composes that's also why a few
people um suggest that composes should
rarely be asung by default so you can
decide if you want to weit them or not
and I think it makes sense but back to
the topic here let's check out how view
solves this with script set up and to be
fair there are lots of solutions that
antin mentioned here once again you can
just say hey let's not do that let's
avoid that let's call for example all
life cycle Hooks and all composes before
the async ones but especially with
that's not always easy and possible
especially if you say okay there's
something depending on something else
you still can do that that's not
necessarily a problem but that's one
option another option would be okay we
can do it as reactive sync we skip over
that but read the blog post it's really
good and the other option would be hey
let's explicitly bind the instance but
the problem is that doesn't fully work
and it's a bit of like internal API so
yeah not ideal but the best suggestion
is is compile time magic and as we use
script setup mainly well that is
resolved and let's see how cons poost
equals a weight fatch looks like after
the compilation you can also check that
in a view single file playground link is
in the description of the video so here
we see okay we have underscore uncore
toreore restore and more or less this is
called with an with as context function
here with a temp and a restore we
awaited and then we call the restore
function to get get the instance back so
if you don't fully grasp it code is
totally fine you don't have to it also
took me a while but this will work for
script setup because the compiler can do
some magic so that's great right but as
soon as you use composes yourself you're
not really into script setup especially
nested composes that doesn't fully work
anymore same with well anything that you
extract so while script setup solves it
on top level going levels deeper
extracting things composing things will
make it a bit more difficult but there's
also a solution there especially with KN
so let's have a look how that works
there as I mentioned with KN we have a
couple of solutions so maybe let's
change that back here to script
setup um maybe bigger not await script
setup here and we await use break me
okay so so far so good the arrrow is b
as before and let's fix that so in here
we have exactly this we have the await
and then the use head so one way to
tackle this is as Anthony said let's
just well move things around so we could
say let's call use head first and then
we await the use Asing data part and
that should work fine so let's check in
the browser if that's the case and yes
we got it of course because now the asnc
operation comes last but what if it's
different what if the whole thing
depends actually on news Asing data so
what if we say okay you know what we'll
get some data here so let's say cons
data equals use it in
data and the title should be in here
let's say data. value and probably just
said data that's fine and we resolve it
with title set and also we make sure
that it's definitely there so it might
not complain it's still complaints
because okay yeah we don't know let's
type it as any to make it bit
happier and
see what will happen now but here the
problem is now that we can't really
await it anymore because if we await it
then let's check the browser things will
break again and that's not really
desired so instead of doing that we
could say okay let's return response
here and have used as data we don't
await it we say Okay response. data is
what we need that's the same as before
right and then here we return the
response still given an option to await
so we still awaited in use break me and
now things should work pretty fine in
the browser and they
do interestingly that is still not the
most preferred approach here there's
still three more options to fix that
because also this scenario here it it
works and once again you have the option
you don't have to keep it Asing you can
fully not decide not to you can just
call it somewhere so that's pretty cool
and you can even say hey use lazy Asing
data if you want to and then use pending
State and so on so it's pretty nice but
there are a few more things so let's
just jump back to the await here and
let's keep exactly this scenario let's
say use head is depending on use Asing
data so this once again breaks we've
seen that before and there's another
option there's another option called run
with context so the idea is that we have
uh the KN app through use KN app so
let's call this and say we have the app
here and now we say yeah you know what
to not lose the context we can run
app.run with context as long as we have
the next app beforehand and we just wrap
use head in here around so in
here this 96 this use hat will run now
with the next context as wanted and as
set and if we check the browser things
work again mainly because the context is
now not lost anymore and we also don't
have to pass it explicitly to the
composable which would be a bit strange
and weird so the good news this works
fine there's also one more option called
call with KN it's basically the same
idea but you pass in Call of KN then the
KNX app then the function and then the
arguments let me quickly show that to
you so so instead of run with context
you would do call with next you would
have to import that it's not Auto
imported you would have to pass in the
app use hat and then an array with
arguments in this case it's just one if
we remove this and um do some
exclamation marks here and refresh the
browser we will see that's also as
expected over here so these are two
options to resolve that in your code
itself to make sure that the whole
instance is not lost at all but what if
it tell you there's one more option
without changing anything that would be
cool right let's dive into it and that
means let's build everything back as it
was before we had a you know what just
let's let's just go back we had to use
head before with um straight under it
there we go we don't need to return
anything and that's it and just to make
sure once again in the browser this
breaks as expected so how we fix it well
we can do the following in our nox app
we can use experimental and we use as
context and set it to true
and this little thing allows us to use
um an experimental feature called as
context that's um what the parameter
says too enable native as context to be
accessible for n composes and the best
part is if we now just check the browser
we're good I didn't change anything else
in the code let's just quickly check
again and write like title set switch
back it works awesome but wait first of
all what is this as in context and
second of all why uh why is it not
enabled by default why is it
experimental let's check it out best
resource for this is the pull request
with regards to the experimental native
as in context and while we dig into how
view handles the ason context topic and
not losing it through script setup we
didn't check how KN is doing that and
that's a good point so puya is nicely
listing here how the whole thing works
with uh KN as well we have The View uh
script setup option here to support
Asing KNX uses Asing transform through
UNC context UNC context or uncx is yet
another package of njs and this also has
an Asun context option and also an Asun
transform option to make sure that in
plugins and middleware everything will
be nicely uh wrapped around so you don't
have to deal with these contact issues
for you so that's also what puya
mentions here but the problem is it's
one single level
because for nest composes it's a bit
trickier right so when we see this here
yeah this this will not exactly work you
can have a look PR is once again Linked
In the description below and the problem
is that well as soon as you go deeper
and deeper no wrapping around will help
of course you can still do it manually
with KN run context so this works but
also just for one level and well the
only real solution here would be the as
in context
so this is a feature based on nodes asy
local storage and that's an important
point I'll come to that that in a bit
and un context to make sure okay as
context will work out of the box for all
nested as composes which is great you
don't have to transform anything and so
on and so on but the problem is that
noes Asun storage well it's only for
node it's it's not necessary support in
all run times and while anjs no and
Nitro and so on we all try try to be
runtime agnostic this is experimental so
it might not work in some production
platforms but in death it seems fine
which is a bit meh but luckily wherever
node itself runs that's a good chance it
will work and the good part is there's a
mock for that in unen which is also used
so you can definitely try it out but
there's more good news as mentioned this
whole feature is built based on noes
Asun local storage but there is a
proposal from tc39 for quite a while
already and the idea is to bring as
context as a language primitive in here
and the good thing is also it's on stage
two so it's not super super far away
given that you can start with Stage zero
which is any kind of proposal in stage
one we like okay let's get it slowly
going but it can still mean couple of
years we don't know yet so keep track
take a look at as context and the idea
is here is that if you have it in
JavaScript itself you don't really need
to rely on node or Deno or any kind of
other kind of runtime it will just work
everywhere where JavaScript is supported
and that would be pretty pretty neat but
yeah the idea is once again it's limited
for now for now there is also cloudflare
workers who also have as context
tracking so there are few ways to take a
look if that simple flipping uh the
switch would work out for you especially
if you host things not on like an edge
or an um serverless runtime there might
be good chances even serverless with um
with just node could work so flip it on
try it against your cicd and I I hope
you have you have cicd right otherwise
there's a video about testing at Le some
basic tests can help also catching these
so check it out um and there you go so
let's give a very brief summary so first
of all this error message is basically
related to asyn code that the next
instance the context of it is not
available anymore there is as I said
before good documentation which is
linked below as well and I've briefly
shown how to provoke the error message
how to prevent it and we have couple of
ways to deal with it from not using
async weight straight away so from
rearranging things to make the composes
come before the weed uh composable or
function to using call with KN and app.
run with context from use KN app and
last but not least the experimental Asin
context option so let me know have you
had that error message I'm pretty sure
you had because there's so many of that
let me know how you fixed it how it
worked out and which option of these
will you try and which worked for you
let me know in the comments and uh as
usual check also the newest D of view
episode with Michael and me talking
about teleports in View and also an so
don't forget to check that out other
than that questions suggestions
feedbacks topics everything you want
down there um also thanks a lot to all
the channel members and um see you guys
and girls next Friday talk to you soon
happy hacking
[Music]
oh
[Music]
Voir Plus de Vidéos Connexes
How to Set Up an Unreal Engine 5 Git Repository - SourceTree Source Control
Lecture 1.1 — Why do we need machine learning — [ Deep Learning | Geoffrey Hinton | UofT ]
macOS Menu Bar App (Code Along) | SwiftUI, Xcode
New apk without Activation for play games with keyboard and mouse in mobile like Computer |free fire
Playmaker Load Scenes Async Additive
Adding an App Icon and Launch Screen to SwiftUI | Todo List #7
5.0 / 5 (0 votes)