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