SyntaxError: Identifier '_toDisplayString' has already been declared

[SteinRobert]

This happens when using Nuxt 3.6.5 with this module.
Based on the examples from the docs (where this happens as well).

SyntaxError: Identifier '_toDisplayString' has already been declared

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.

[sotnikovse]

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

[matthiasobergasser]

+1

[surchs]

I think this is tracked / discussed here: nuxt/nuxt#23363

[danielroe]

This looks to me like @vitejs/plugin-vue might be injected twice (and therefore transforming components twice).

https://github.com/storybookjs/storybook/blob/0ca0061c3fde053830aa1b5bdc0fce54776e1e13/code/frameworks/vue3-vite/src/preset.ts#L20-L23

That is because Nuxt injects this plugin after vite:extendConfig is resolved (to allow users customising the options):

https://github.com/nuxt/nuxt/blob/38b6d88cfab3477edabfa37d6f97b95eefc6ae6c/packages/vite/src/client.ts#L142-L149

Histoire solves the issue like this: https://github.com/histoire-dev/histoire/blob/main/packages/histoire-plugin-nuxt/src/index.ts#L172-L181

[JulianMar]

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

[chakAs3]

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

[bmulholland]

@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.

[bmulholland]

I downloaded an exact copy of the StackBlitz repro and get a different error locally:

Error: [nuxt] instance unavailable
at useRuntimeConfig (/node_modules/.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:

1. No version of Nuxt 3 and Nuxt Storybook work together on my actual codebase.
2. The StackBlitz reproduces the error I get in my codebase on all versions of Nuxt/Storybook.
3. The same code locally produces a different error, and it does go toggle on/off when using Nuxt 3.6 vs 3.7.

That's all I can do today. Good luck @chakAs3 !

[bmulholland]

This is probably also #442

[filiphazardous]

@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.

[filiphazardous]

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.

[filiphazardous]

Next update:
I found more problems, and don't think the transformWithEsbuild is the problem anymore.

1. 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.
2. Removing cache from the equation, I started getting errors about there not being any Vue context, and Vue falling back to shared context.
3. Setting Nuxt up in the storybook module, I added 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?

[bmulholland]

@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.

[chakAs3]

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

[filiphazardous]

@chakAs3 The new version works much better. Thanks!

[chakAs3]

@chakAs3 The new version works much better. Thanks!
Welcome, Glad to hear that.

[tobiasdiez]

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 storybook-vue/storybook-nuxt#95.

Is still issue still present?