Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot using useNuxtApp on stories #85

Open
VegasChickiChicki opened this issue Dec 12, 2023 · 18 comments
Open

Cannot using useNuxtApp on stories #85

VegasChickiChicki opened this issue Dec 12, 2023 · 18 comments

Comments

@VegasChickiChicki
Copy link

If i try use const nuxtApp = useNuxtApp() i have error:

Error: Converting circular structure to JSON
  at JSON.stringify (<anonymous>))
  at toDisplayString (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:1566:159))
  at Proxy._sfc_render (/components/app-tooltip-area/app-tooltip-area.vue?t=1702415698562:49:15))
  at renderComponentRoot (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:2399:17))
  at ReactiveEffect.componentUpdateFn [as fn] (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:7273:46))
  at ReactiveEffect.run (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:410:19))
  at instance.update (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:7386:52))
  at setupRenderEffect (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:7394:5))
  at mountComponent (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:7184:5))
  at processComponent (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:7137:9))
@chakAs3
Copy link
Contributor

chakAs3 commented Dec 17, 2023

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
Copy link
Contributor

chakAs3 commented Dec 17, 2023

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

@VegasChickiChicki
Copy link
Author

@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
Copy link
Author

On my main project i see this:
image
I have nuxt context, but with error and my injected plugins...

And i see errors in console:
image

@VegasChickiChicki
Copy link
Author

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

@chakAs3
Copy link
Contributor

chakAs3 commented Jan 10, 2024

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

@lud-hu
Copy link

lud-hu commented Jan 22, 2024

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

@AngeloSchulerPiletti
Copy link

AngeloSchulerPiletti commented Jan 24, 2024

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",

@peteromano
Copy link

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

Also btw any nuxt plugin breaks sb

@Kum0ri
Copy link

Kum0ri commented Jan 26, 2024

Same problem here.

@chakAs3
Copy link
Contributor

chakAs3 commented Jan 27, 2024

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
Copy link

lud-hu commented Jan 28, 2024

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
Copy link
Contributor

chakAs3 commented Jan 30, 2024

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

@lud-hu
Copy link

lud-hu commented Jan 31, 2024

@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
Copy link

Also having this problem, not just with useNuxtApp #97

@alniv94
Copy link

alniv94 commented Apr 4, 2024

also having this problem.

@chakAs3
Copy link
Contributor

chakAs3 commented Apr 15, 2024

@alniv94 did you try the latest version ?

@daviddomkar
Copy link

Still broken on latest version. See my issue: #97

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants