Cannot using useNuxtApp on stories

[storybook-vue]

Cannot using useNuxtApp on stories

[AngeloSchulerPiletti]

I am facing a similar issue.

When I use NuxtImg or NuxtLink in a component in a story, I get the following error on Storybook:

Error: [nuxt] instance unavailable
    at useNuxtApp (nuxt.js?v=e83376db:200:13)
    at useRouter (router.js?v=e83376db:8:10)
    at setup (nuxt-link.js?v=e83376db:146:22)
    at callWithErrorHandling (chunk-EGYWHQL7.js?v=e83376db:1877:18)
    at setupStatefulComponent (chunk-EGYWHQL7.js?v=e83376db:9273:25)
    at setupComponent (chunk-EGYWHQL7.js?v=e83376db:9234:36)
    at mountComponent (chunk-EGYWHQL7.js?v=e83376db:7564:7)
    at processComponent (chunk-EGYWHQL7.js?v=e83376db:7530:9)
    at patch (chunk-EGYWHQL7.js?v=e83376db:6996:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-EGYWHQL7.js?v=e83376db:7674:11)

However, this error only happens when I fresh load on the page that I am accessing. If I am on another story and then go to the one containing the NuxtImg or NuxtLink, everything works fine.

Dependencies:

"@storybook-vue/nuxt": "0.2.1",
"@storybook/vue3": "7.6.10"
"@storybook/vue3-vite": "7.6.10",
"@storybook/addons": "7.6.10",
"storybook": "7.6.10",
"vite": "5.0.12",
"vue": "3.4.15",
"nuxt": "3.9.3",
"@nuxt/image": "1.3.0",

[chakAs3]

Please share your Storybook repo this is not related to Nuxt i think you're using no serializable prop in you component.
Maybe you are passing a component as prop

[chakAs3]

Please share your Storybook repo this is not related to Nuxt i think you are using no serializable prop in your component.

[VegasChickiChicki]

@chakAs3 Check this repo: https://github.com/VegasChickiChicki/nuxt-3-storybook

I have Error: [nuxt] instance unavailable or Error: Converting circular structure to JSON if i'm reload page or go between docs and story on navbar storybook

[VegasChickiChicki]

On my main project i see this:

I have nuxt context, but with error and my injected plugins...

And i see errors in console:

[VegasChickiChicki]

@chakAs3 Hi, can you check this issue. No one injected plugin are not available in the stories

[chakAs3]

Hi @VegasChickiChicki please use the latest version here a working demo
https://stackblitz.com/~/github.com/chakas3/storybook-vuetify-issue

[lud-hu]

Hi @chakAs3 ,

any news on this issue? I still get the Error: [nuxt] instance unavailable once a story uses the useNuxtApp().

Also (I guess it is related) I get an error in the console:
Uncaught (in promise) TypeError: app is not a function
It comes from packages/storybook-nuxt/src/preview.ts:19

storybook-nuxt/packages/storybook-nuxt/src/preview.ts

Line 19 in 71b8db7

app().then(() => {

[peteromano]

I get the same issue too but after some jank, it ends up working..

Also btw any nuxt plugin breaks sb

[Kum0ri]

Same problem here.

[chakAs3]

Hi guys can you try to use only. @storybook-vue/nuxt now, till get time to look into the module.
@storybook-vue/nuxt is enough to run your Storybook app, The module is more for Nuxt app in order to interact with storybook

[lud-hu]

How would we do that, @chakAs3 ?

I e.g. tried to checkout your example from https://github.com/storybook-vue/storybook-nuxt-starter,
and update the mentioned lib (yarn add --dev @storybook-vue/[email protected] or yarn add --dev @storybook-vue/[email protected]), then start storybook and then navigate to http://localhost:6006/?path=/docs/composables-use-config--docs but I still get the Error: [nuxt] instance unavailable.

[chakAs3]

Hi @lud-hu can you use pnpm instead i'm still having issue with yarn, i recommend pnpm for now

[lud-hu]

@chakAs3 Unfortunately this does not help as well. :(

Steps to reproduce:

git clone https://github.com/storybook-vue/storybook-nuxt-starter.git
pnpm i
# add useNuxtApp() to components/MyComposable.vue
pnpm storybook
# open http://localhost:6006/?path=/docs/composables-use-config--docs

Errors:
@storybook-vue/nuxt: 0.2.0: Error: [nuxt] instance unavailable

@storybook-vue/nuxt: 0.2.0 & @storybook-vue/[email protected]:

Error: Build failed with 4 errors:
node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@storybook-vue/nuxt/dist/preview.mjs:3:7: ERROR: Could not resolve "#build/paths.mjs"
node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@storybook-vue/nuxt/dist/preview.mjs:4:7: ERROR: Could not resolve "#build/fetch.mjs"
node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@storybook-vue/nuxt/dist/preview.mjs:5:20: ERROR: Could not resolve "#build/plugins"
node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@storybook-vue/nuxt/dist/preview.mjs:6:7: ERROR: Could not resolve "#build/css"
    at failureErrorWithLog (/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1649:15)
    at /node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1058:25
    at /node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1525:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[daviddomkar]

Also having this problem, not just with useNuxtApp #97

[alniv94]

also having this problem.

[chakAs3]

@alniv94 did you try the latest version ?