Getting error folowing setup tutorial Unhandled error during execution of setup function

[flowreaction]

Hi guys, I am trying to figure out how to use storyblok with nuxt 3 and keep getting this error:

[Vue warn]: Unhandled error during execution of setup function 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >

This error message really doesn't give me any hint why I am having problems.

I created this repo here for you to try it out but it is basically the exact same as in this tutorial here

I am currently using nuxt3 rc11 and the current release of this package (4.4.1).

[maccettura]

I am having the exact same issue following that tutorial.

[flowreaction]

what system are you on? I am really flabbergasted that it seems to be an issue that doesn't affect a lot of people.
FIY I am using a M1 Mac. with node v16.15.0 and npm v8.5.5.

[flowreaction]

I tried to narrow down the problem, and it seems to be a AxiosError. I get a 404 Not Found when useStoryblok is being run. I followed the tutorial exactly and the access token is correct.

[flowreaction]

I figured out what was happening and it was user error. the slug parameter in the useStoryblok() composable has to match with the content slug. Which makes sense. I just wish the error messages would be more clear.

[maccettura]

@flowreaction My useStoryBlok() call on the index.vue file was passing the string 'home' which is the slug my content was using (albeit with the real path '/'). I still get the error when using 'home' or '/'. I too am on an M1 macbut I have node v17.2.0 and npm v8.1.4

[skoulix]

Exact same error on Mac M1 with node v14.19.0 and npm v6.14.16

[Vue warn]: Unhandled error during execution of setup function 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >

[quantosnetwork]

how come this is closed without resolution ?

[quantosnetwork]

I have the exact same problem on macbook pro m1 and I did follow the tutorial to the letter

[skoulix]

Do we still need the Axios dependency on Nuxt 3? Can’t we just use the internal composable useFetch() ?

[CKGrafico]

same error can anyone reopen this?

[skoulix]

For those who would like to get their project up and running, for now follow the steps below and it should work.

Use the following packages in these specific versions

"nuxt": "^3.0.0-rc.2",
"@storyblok/nuxt": "^4.4.1",
"axios": "^0.26.0",

And in nuxt.config.js

export default defineNuxtConfig({
	modules: ['@storyblok/nuxt'],
	storyblok: {
		accessToken: 'your-storyblok-space-token',
		bridge: true,
		apiOptions: {},
		useApiClient: true,
	},
});

[thiagosaife]

@alexjoverm Can this issue be related to our JS SDK's axios removal? Could you take a look on this, please?

[CKGrafico]

would like to get their project up and running, for now follow the steps below and it should work.

Use the following packages in these specific versions

awesome reply, I was trying RCs but I didn't arrive at RC2.
BTW this is 9 RC before the current one, let's see if someone fix the bug :D

[Dominik-Giroux]

Hey guys, I'm on a M1 mac as well, encountered the same exact error but figured a way around while still using theses versions:

"@storyblok/nuxt": "^4.4.2",
"axios": "^0.27.2",
"nuxt": "3.0.0-rc.13"

I created a getStory method from lib/storyblok.ts which use Nuxt fetch

export default async function getStory() {
  const route = useRoute();
  const slug = route?.params?.slug ? route.params.slug : "home";
  const token = "insert-your-token";
  const version = "draft";
  const { story } = await (
    await fetch(
      `https://api-us.storyblok.com/v2/cdn/stories/${slug}?version=${version}&token=${token}`
    )
  ).json();
  return story;
}

and in my index.vue template I have

<StoryblokComponent v-if="data" :blok="data.content" />

finally the script setup is

import getStory from "~/lib/storyblok";
const { data } = await useAsyncData("vue", async () => await getStory());
onMounted(() => {
  useStoryblokBridge(data.value.id, (evStory) => (data.value = evStory));
});

You should get your token from the environment variables and same goes for the draft / published versions, however this method work fine with the bridge between nuxt and storyblok. Now let's just hope that this issue get resolved in a further update.

[larrasu]

I made it work by using "axios": "^0.25.0". No other configurations are needed.

[k16e-me]

Has this stayed opened 5 months down from original poster as there still hasn't been a solution from Storyblok to be shared here. Are we advised to follow the hacks suggested by other commenters here? I'm on the latest version of Nuxt (3.2.2) and of Storyblok/nuxt (5.1.0) and following the doc to the letter and yet haven't been able to come out of the error

[Vue warn]: Unhandled error during execution of setup function                                                        21:18:00
  at <[...slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >

And then you get 500 navigating from route to route or sometimes just on refresh.

[k16e-me]

Or @flowreaction did you get it solved somehow, do you wanna share your way out?

[Dav3rs]

@Dawntraoz Same situation here, it's impossible to go through the tutorial spliting the useAsyncStoryBlock function we can see that the api call is throwing error
Somethimes it works, It have a very unstable behavior

[Dav3rs]

And check what happens when using the vanilla client for the api call

[k16e-me]

O, boom, look at that...

[Dav3rs]

I mean, it works!! That's just refreshing the page again and again to check that there is no error happening randomly.

[k16e-me]

It's painfully erratic. It's crippled my project for well over a month now. It's gone on too long and I think it's from the Storyblok code or how it's interacting with Nuxt 3 or both ...

[Dav3rs]

This is madness dude 😭, the same thing that was giving me error now works, wtf!

[k16e-me]

This is madness dude 😭, the same thing that was giving me error now works, wtf!

Work just with useAsyncStoryblok or with you replicating that with vanilla on the page?

[Dav3rs]

By default

<script setup>
const story = await useAsyncStoryblok('home', { version: 'draft' })
</script>

<template>
  <StoryblokComponent v-if="story" :blok="story.content" />
</template>

On Thursday I was on the tutorial and receiving a lot of errors I give up. Then I tried on wsl and it worked without issues, I thought then "in linux it does not happen", on the 5th lesson it start to happen and I tried to go back and revert things without success. I even scaffold a new space with the default generated codebase and it was all 500.
Today it doesn't worked till now... just because nothing!!
This is driving me crazy. 😔

[k16e-me]

No way. It works and then it breaks. I've been at this for, I'm not joking, a month and few days... I'm almost surrendering from Storyblok (and Nuxt 3)!

[k16e-me]

Either bug in a line in useAsyncStoryblok or how it's interacting with Nuxt 3 fetch or something... it's quite the frustration

[Dav3rs]

Hey @k16e-me try adding this and let's see, maybe the default value for it is too low, and that's why it works randomly, maybe it is affected by the server load.

[k16e-me]

You might be right.... but that's so, so so weird... How come no one at Storyblok is commenting on this because the error seems littered everywhere...

[k16e-me]

So, this may be it, gosh it'd be so painful... I'm constantly refreshing and navigating around and it's not breaking... I even went ahead with 200

[rogadev]

I really think this error message needs to be made clearer. There is absolutely nothing that tells me what I should be doing in order to get your Storyblok/Nuxt3 demo project working in my local development environment.

Furthermore (and I will make an issue about this at some time in the near future), I have absolutely no idea how to set up HTTPS in my dev environment, running the most popular OS and most popular code editor, and that is an abysmal failure to your customers.

This is such an incredible product. It would be doing so much better if people - beginners especially - can get up and running with no friction. At this point, the friction is hitting-a-brick-wall-with-your-face severity. This needs to be addressed ASAP, IMHO. You're losing customers who would otherwise be huge supporters of your product.

I'm going to try stepping through some of the steps suggested in this thread, but I think that the above input is warranted and important to the success of this potentially incredible product.

[SebbeJohansson]

Okay so!
There are two issues baked into one here.

1. Apparently error.value?.response can be undefined here: https://github.com/storyblok/storyblok-nuxt/blob/main/lib/src/runtime/composables/useAsyncStoryblok.ts#L29-L31
   This is causing the issue where Cannot read properties of undefined is erroring in useAsyncStoryblok that @k16e-me among others have reported.
2. useAsyncStoryblok is triggering a proper nuxt3 error on errors from storyblok API, which means it need to be caught.
   
   

The first error is something that needs to be fixed in the module.
The second error is harder. @alvarosabu I would suggest that the documentation and examples are updated when using useAsyncStoryblok so that errors are properly caught. I guess removing it and printing a normal console.errror, but I personally think using nuxt3 stuff makes more sense.

[Dav3rs]

You can try catch it indeed, but that doesn't solve why the error is raised in first place just for nothing randomly.
Why the nuxt module has propensity to get this "operation aborted" error that doesn't happens with the generic client.

#210 (comment)
#210 (comment)

[SebbeJohansson]

@Dav3rs are you fetching a huge page? I still haven't seen those errors that both you and @k16e-me are having where it randomly doesn't finish fetching. Tried it both in production environments and locally, and I cant reproduce that part of the issue.

[Dav3rs]

We are fetching the tutorial, just that amount of data, as I described in all my comments and screenshots it was very random but the logs are there, we solved partially updating the timeout config property, is the nuxt module using a default for that or some tricky config else different than the default values on the generic client?

if you want to replicate our "operation aborted error" with a 100% error rate just do this :))))))))))))))))))))

That's why I suspected that it was related to a bad default value.

[Dawntraoz]

Hi folks @k16e-me, @Dav3rs, @rogadev & @SebbeJohansson 👋

First, thank you for reporting your issue and trying to help each other by suggesting how to test and proceed. That's helpful! 💜 On the other hand, sorry for the delay in response from our side. We don't have a dedicated time or person to the SDKs; we try to help when our workload allows us, and here we are!

I will block sometime this week to check what is happening and see if it's related to the US spaces, taking into account that Sebbe is in the EU too, and maybe for that, we didn't experiment with that error yet. If it's due to delays, we must have a workaround for that.

We will also upgrade the js-client version because, afaik, they fixed some issues with timeouts recently, and maybe that will solve it. Maybe for that, the client is working for you, but not the SDK, can you check the versions @Dav3rs?

And finally, @SebbeJohansson let's solve any error-handling issues 🫂

[SebbeJohansson]

@Dawntraoz Check the PR i made. Feel free to reach out on discord as always!

[alvarosabu]

Hi everyone! Let's divide this bad boy into pieces to get a better sense of what's happening:

1. The original issue made opened by @flowreaction is solved since v5.0.0 when axios was removed. Check 93a6962
2. The error @k16e-me mentioned here Getting error folowing setup tutorial Unhandled error during execution of setup function #210 (comment) is another issue, the problem is that the error message:

[Vue warn]: Unhandled error during execution of setup function                                                        21:18:00
  at <[...slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >

Is way too generic, which is misleading since has nothing to do with the original issue, @k16e-me could you be so kind to open a new ticket with a reproduction link of your specific case and the output of npx envinfo --system --npmPackages '{nuxt,@storyblok/*, }' --binaries --browsers

To avoid more confusion with generic error messages, we open #317 to improve the error handling to provide better DX. You can follow the progress there, @SebbeJohansson let's align there with the PR you opened

3. About the timeout issue Getting error folowing setup tutorial Unhandled error during execution of setup function #210 (comment) , this is another separate one, seems like is only reproducible on region: us so we opened a separate ticket here to track it Investigate timeout issues in US region spaces #318

That being said, thanks a lot for your input, has been really helpful, I will close this ticket since the original issue is solved, let's follow up on the correspondent issues.

Thank you