Using with NuxtIcon: At least one <template> or <script> is required in a single file component

[lud-hu]

I just installed this extension in an existing project with npx storybook-nuxt init and it seems to run fine, but above the Storybook UI there is an error shown:

 ERROR  Internal server error: At least one <template> or <script> is required in a single file component.                                                                            10:16:05 PM
  Plugin: vite:vue
  File: /.../node_modules/nuxt-icons/dist/runtime/components/nuxt-icon.vue

Unfortunately I can't find any help in other issues here or on the web. I also don't understand why the globally available NuxtIcon component could throw this error even though the simple dummy component I use in Storybook is not even using it.

[chakAs3]

please check the version of @storybook-vue/nuxt should be 0.2.0 , nuxt 3.8.1

[lud-hu]

Thanks @chakAs3 . I will check it out and get back to you. We are currently on upgrading to Nuxt 3.8.x but it might take a while due to some breaking changes...

[lud-hu]

Hi @chakAs3 ,

we have upgraded to nuxt 3.9.1 and we still get the same error stating

ERROR  Internal server error: At least one <template> or <script> is required in a single file component.                                                                            10:16:05 PM
  Plugin: vite:vue
  File: /.../node_modules/nuxt-icons/dist/runtime/components/nuxt-icon.vue

versions:

"@storybook-vue/nuxt": "0.2.1",
"nuxt": "^3.9.1",
"storybook": "7.6.7",

[chakAs3]

Hi @lud-hu on working on this thanks for reporting this

[lud-hu]

Thanks @chakAs3 !

After some more investigation in the last days, I've seen that it is caused by e.g. using the <NuxtIcon /> component exported from https://www.npmjs.com/package/nuxt-icons. So I guess the problem is the retrieval of the needed auto imports from nuxt config into the storybook vite config. Hope it helps.

[Ibochkarev]

@chakAs3 Hello

Please pay attention to this comment as well. storybookjs/storybook#21196 (comment)

[chakAs3]

@lud-hu i have already fixed this in this PR i think #87

[lud-hu]

@chakAs3 cool, good to know! Is there any way I can test it? It seems like the mentioned branch is based on a very old one (0.1.5) and I don't know how to run it locally to test with the latest nuxt version.

[itslewin]

Still seeing this issue in a blank repo containing @nuxt/ui and after setup with npx storybook-nuxt init.

[chakAs3]

hi @its-lewin it is not compatible with the new @nuxt/ui, i will need time to figure out the issue.

[alniv94]

using nuxt 3.11.1 and nuxtIcon

[tobiasdiez]

NuxtIcon is declared global (https://github.com/nuxt-modules/icon/blob/094a7f4db76902c95e855d13244a880c442e61c6/src/module.ts#L52) and thus this issue is a duplicate of #4 (which was just fixed).