Nuxt Instance Unavailable - Async Code in Vue and Nuxt with the Composition API (+ raffle 🎁)

Summary

在这段视频脚本中，主讲人讨论了一个常见的编程错误信息：'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

00:00

😀 解决 'next instance unavailable' 错误

本段视频脚本介绍了一个常见的错误消息 'next instance unavailable'，解释了它的含义，并提供了解决此问题的方法。视频开始时，主持人提到了上一个视频中的抽奖活动，由于Google和YouTube的一些问题，决定将抽奖延长一周。随后，主持人介绍了错误消息通常与异步代码有关，并展示了如何在一个示例应用程序中触发和修复此错误。通过将异步代码移动到一个可复用的composable中，展示了错误是如何发生的，并提出了一些解决方案，包括检查文档和理解错误的根本原因。

05:02

🔍 深入理解异步代码和组件实例

在第二段中，视频脚本深入探讨了为什么异步代码会导致 'next instance unavailable' 错误。解释了Vue组件实例如何在全局变量中存储，以及异步函数如何与此交互。提到了设计限制和composable的使用建议，即默认情况下不应使用异步。还讨论了Vue如何处理异步composable和代码，以及如何通过编译时魔术解决 'script setup' 中的问题。最后，提出了一些解决方案，包括重新排列代码顺序，使用 'app.runWithContext' 和 'callWithKN' 等方法。

10:03

🛠️ 使用不同的方法解决异步问题

第三段脚本继续讨论解决异步问题的不同方法。介绍了 'runWithContext' 和 'callWithKN' 这两种方法，它们可以帮助保持上下文不丢失，并且不需要显式传递给composable。此外，还提到了一个新的实验性功能 'asContext'，它可以在不更改任何代码的情况下解决问题。解释了 'asContext' 是如何工作的，以及为什么它是实验性的。还提到了tc39的提案，该提案旨在将 'asContext' 作为JavaScript语言的一个原生特性引入。

15:04

🎉 总结和观众互动

在视频的最后部分，主持人总结了关于 'next instance unavailable' 错误的信息，包括如何触发此错误、如何预防以及几种不同的解决方法。提到了不立即使用异步权重、重新排列代码顺序、使用 'callWithKN' 和 'app.runWithContext'，以及实验性的 'asContext' 选项。主持人鼓励观众分享他们是否遇到过这个错误，以及他们是如何解决问题的。此外，还提到了与Michael讨论的关于View和Teleports的最新D of View剧集，并邀请观众提出问题、建议和反馈。

Keywords

💡Arrow message

Arrow message 是指在开发过程中遇到的一个错误提示，它通常与异步代码有关。在视频中，这个错误提示是 'next instance unavailable'，意味着在异步函数中无法访问到 Vue 的实例。这个概念是视频的核心，因为整个视频都在解释这个错误的含义以及如何解决它。

💡asynchronous code

异步代码是指在程序执行过程中，某些操作可以并行进行，而不需要等待前一个操作完成。在视频中，异步代码的使用导致了 'next instance unavailable' 的错误，因为异步操作在执行时，Vue 组件的实例可能还未完全创建好。

💡composable

Composable 是 Vue 3 中引入的一个概念，它是一种可复用的逻辑单元，可以在组件之间共享。在视频中，composable 被用于演示如何触发 'next instance unavailable' 错误，并且是解决问题的关键部分。

💡script setup

Script setup 是 Vue 3 中的一个语法糖，它允许开发者以一种更简洁的方式编写组件的脚本逻辑。在视频中，script setup 被用来展示如何在顶层组件中避免 'next instance unavailable' 错误。

💡useAsyncData

useAsyncData 是一个自定义的 composable，用于处理异步数据。在视频中，它被用来演示如何触发 'next instance unavailable' 错误，并且是解决问题的一个关键点。

💡Vue

Vue 是一个用于构建用户界面的渐进式框架，它被广泛应用于前端开发中。在视频中，Vue 的实例和组件是讨论 'next instance unavailable' 错误的上下文。

💡error message

错误消息是在程序执行过程中出现问题时，系统提供的提示信息。在视频中，'next instance unavailable' 是一个特定的错误消息，视频的目的是解释这个错误消息的含义以及如何修复它。

💡component instance

组件实例是指在 Vue 中，当定义了一个组件后，每次使用该组件时创建的具体对象。在视频中，组件实例的不可用是导致 'next instance unavailable' 错误的根本原因。

💡useHead

useHead 是一个 composable，用于管理页面的头部信息，如标题。在视频中，useHead 被用来演示如何在异步函数中安全地使用 composable，以避免错误。

💡context

上下文是指在程序执行过程中，代码运行的环境信息。在视频中，上下文丢失是导致 'next instance unavailable' 错误的原因之一，而解决方案之一是使用 runWithContext 或 callWithKN 来保持上下文。

💡experimental feature

实验性特性是指那些尚未完全稳定，可能在未来版本中有所改变的特性。在视频中，提到的 'as context' 是 Vue 3 的一个实验性特性，它允许在异步代码中保持组件实例的上下文，从而解决 'next instance unavailable' 错误。

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]