Closed SteinRobert closed 1 month ago
I got the same error
Reproduction https://stackblitz.com/edit/nuxt-starter-qm9s4q?file=components%2FTest.vue,stories%2FTest.stories.ts
nuxt@3.7.4 @storybook-vue/nuxt@0.1.4 storybook@7.4.5
+1
I think this is tracked / discussed here: https://github.com/nuxt/nuxt/issues/23363
This looks to me like @vitejs/plugin-vue
might be injected twice (and therefore transforming components twice).
That is because Nuxt injects this plugin after vite:extendConfig
is resolved (to allow users customising the options):
Histoire solves the issue like this: https://github.com/histoire-dev/histoire/blob/main/packages/histoire-plugin-nuxt/src/index.ts#L172-L181
If that would be the case, couldn't we check this by using the vite:configResolved
hook, right? If I understand it correctly there the @vitejs/plugin-vue
should show up twice.
I tried it in here and it's not showing up twice. https://stackblitz.com/edit/nuxt-starter-m6xpys?file=nuxt.config.ts
If that would be the case, couldn't we check this by using the
vite:configResolved
hook, right? If I understand it correctly there the@vitejs/plugin-vue
should show up twice. I tried it in here and it's not showing up twice. https://stackblitz.com/edit/nuxt-starter-m6xpys?file=nuxt.config.ts
im fixing it now
@chakAs3 FYI, I tried fixing the bug by removing the vite plugin include from node_modules/@storybook/vue3-vite/dist/preset.js
. Not only did that not fix it, it actually stopped compiling the output at all. Super weird: either you end up with double-compiled, or no compilation.
I downloaded an exact copy of the StackBlitz repro and get a different error locally:
Error: [nuxt] instance unavailable at useRuntimeConfig (/nodemodules/.pnpm/nuxt@3.7.4@types+node@18.17.5/node_modules/nuxt/dist/app/nuxt.js?v=e8b2d187:180:27) at setup (/components/Test.vue:7:32)
When running storybook in my actual codebase, I get the double compilation errors discussed above. However, those errors cannot be fixed by downgrading Nuxt to 3.6. So:
That's all I can do today. Good luck @chakAs3 !
This is probably also https://github.com/nuxt-modules/storybook/issues/442
@chakAs3 FYI, I tried fixing the bug by removing the vite plugin include from
node_modules/@storybook/vue3-vite/dist/preset.js
. Not only did that not fix it, it actually stopped compiling the output at all. Super weird: either you end up with double-compiled, or no compilation.
I too have been digging around, sprinkling console.logs throughout the packages in node_modules. The errors are raised by esbuild, which AFAICT isn't a dependency of vite or nuxt. I'll investigate further, to see what I come up with.
Edit: Duh, it does say in the message that the error comes from 'vite:vue' in the beginning of the error message.
The weird thing is that the error doesn't happen until I make a page load.
I keep hacking away at this, and these are my findings so far:
In @vitejs/plugin-vue
there's a function called transformMain
that raises the error. First it generates code in a variable called output
, that is then joined into resolvedCode
. Finally transformWithEsbuild
is called on resolvedCode
to transpile the TypeScript parts.
However, the code handed to transformWithEsbuild
is already fairly well transpiled by the previous calls made by transformMain
, and so transformWithEsbuild
raises the error.
I'm still not sure how to fix the problem. Apparently @vitejs/vue-plugin
works well in nearly every case - I don't understand why we are the only ones bitten by the plugin. Still, it's a pretty good lead - so I thought I'd share it here before I finish out today's work.
Next update:
I found more problems, and don't think the transformWithEsbuild
is the problem anymore.
resolveScript
in @vitejs/plugin-vue
at some points returns code with double imports. Hooking up the debugger to node, it seemed to have a connection with using cached data.console.error
to all the catches in @storybook-vue/nuxt
preview. And it caught errors about double definitions of _block
on the import'#app/entry')
. This means Nuxt never actually got set up properly.I am most definitely way out of my comfort zone here, and am starting to look for workarounds (eg just using @storybook/vue3
instead), unless somebody has some insights?
@filiphazardous You could try messaging Daniel Roe on the Nuxt Discord -- he previously offered to pair with me in debugging this issue.
For me, this was the straw the broke the camel's back. We'll be dropping Nuxt along with our Vue 2 -> 3 upgrade.
Hi @bmulholland @filiphazardous please try the latest release of @storybook-vue/nuxt, it is working now with latest version of nuxt 3.8.1, i did not get time to update the examples. so if you could do it. i will be thankful for you.
the issue was mainly due the use of 2 different version of vite, in @storybook/vue3-vite and nuxt 3.8.1. i believe it is fixed now
@chakAs3 The new version works much better. Thanks!
@chakAs3 The new version works much better. Thanks! Welcome, Glad to hear that.
If @vitejs/plugin-vue
is really the underlying reason for this issue, then the recent storybook update to v8 might have resolved it already. There were also some related changes in https://github.com/storybook-vue/storybook-nuxt/pull/95.
Is still issue still present?
Closing this issue due to inactivity :zzz: Please reopen the issue with additional information if the problem persists.
This happens when using Nuxt 3.6.5 with this module. Based on the examples from the docs (where this happens as well).
See this example: https://storybook.nuxtjs.org/examples/pinia
It throws
Identifier '_createElementVNode' has already been declared
.Could be it has something to do with nuxt 3.7.x. When I downgrade the dependency in the example it seems to work.