components global:true results in: At least one <template> or <script> is required in a single file component

[LucaMargadant]

Thank you a lot for this package. It works very well and i'm super happy that we now have something for nuxt to work with storybook! 👍

I noticed that if you have set global components in nuxt.config to true like this for example, components: { global: true, dirs: ['~/components/global']},, for every globally registered component there will be rendered an error At least one <template> or <script> is required in a single file component.

If you click away the error the storybook and all stories are working as expected until you click on another story.

It's probably a low priority one, because global components are not recommended anyways, but in some circumstances global components can make sense so i just wanted to drop that one here.

[g1ronn1mo]

How did you install the package? I cant get it running :(

[chakAs3]

Thank you a lot for this package. It works very well and I'm super happy that we now have something for Nuxt to work with storybook! 👍

Welcome, I'm really glad to hear that, I was aware of the importance of Nuxt especially for scalable enterprise applications, I put it last in the Q2 roadmap because I had to rewrite the vue3 renderer in reactive mode first for v7, there are other awesome features for Vue developers, Storybook will have a Vue taste and not just a second choice. i am happy to put Vue as a first-class citizen in Storybook, I would love to get more feedback. from the community then I can improve Storybook for Vue / Nuxt

[vloss3]

due to this error, the vueApp is not being mounted(undefined) and composables fail:

runtime.js:4 Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at ...

[oliver-lehner]

I run into the same error but I haven't set up global components explicitly. I'm using @storyblok/nuxt though and it does use globals.

[rezkileap]

I got same issue with oliver-lehner while developing a Storyblok based component (I explicitly use global component since I'm creating a Nuxt Module), any updates on this issue or ETA when will the global component work?

[chakAs3]

@rezkileap i can't reproduce your bug,. Here NuxtWelome component working fine as well as the Entire Vuetify components which are all global, please explain show there are global

try it live https://stackblitz.com/~/github.com/chakAs3/nuxt-storybook-vuetify

[rezkileap]

I boostrap the Nuxt authoring module repo, then in the playground folder, I installed the Storybook, I use 'npx storybook-nuxt init' and opted for pnpm. Now, everything was working fine (including creating a story from the runtime folder) until I tried to import a component that required Nuxt Image or one that depended on another component. I've linked a simple repo to replicate this issue. I hope this make sense
https://github.com/rezkileap/nuxt-module-authoring-kit-with-sb7

[chakAs3]

@rezkileap you have to add the @nuxtjs/storybook module to your. playground/nuxt.config i have push change in PR to your repo

[vloss3]

@chakAs3 sadly it still doesn't work, in @rezkileap example:
https://stackblitz.com/~/github.com/rezkileap/nuxt-module-authoring-kit-with-sb7
run:
cd playground && npm install && npm run build-storybook

ERROR  [vite:vue] At least one <template> or <script> is required in a single file component.                            19:04:38
file: /home/rezkileap/nuxt-module-authoring-kit-with-sb7/src/runtime/components/testComp.vue?nuxt_component=async

=> Failed to build the preview                                                                                            19:04:38
SyntaxError: At least one <template> or <script> is required in a single file component.                                  19:04:38
    at Object.parse$2 [as parse] (file://./node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1904:7)
    at createDescriptor (file://./node_modules/@vitejs/plugin-vue/dist/index.mjs:90:43)
    at transformMain (file://./node_modules/@vitejs/plugin-vue/dist/index.mjs:2302:34)
    at Object.transform (file://./node_modules/@vitejs/plugin-vue/dist/index.mjs:2834:16)
    at eval (file://./node_modules/rollup/dist/es/shared/node-entry.js:25569:40)
                                                                                                                          19:04:38
? Would you like to help improve Storybook by sending anonymous crash reports? › (Y/n)                                    19:04:38

In the example above the components are added via module:

await addComponentsDir({
  path: resolve('./runtime/components/'),
  global: true,
  pathPrefix: true,
  prefix: 'Mds',
 })

but it also doesn't work if you add components directly to ./components/global/component.vue which makes them global

[cyruscollier]

I've having the same issue. Our Nuxt 3 application requires some global components due to a need to dynamically use resolveComponent() with a component name as a variable rather than a literal string.

I did some digging on what might be happening when Nuxt is loaded through Storybook using this add-on. When Nuxt is started normally, the Vue compiler receives a component's source, which is just the component file's raw content as a string, e.g. <template><button>Test</button></template><script></script>. However, when Storybook loads Nuxt, that source string for global components appears to be an async component export, e.g.
import { defineAsyncComponent } from "vue"\n export default defineAsyncComponent(() => import("/Users/ccollier/Develop/test-project/components/global/GlobalTest.vue").then(r => r.default))

It looks like there's some missing step where Storybook and/or Vite needs to actually evaluate that dynamic export so that the source is the actual file content. Perhaps Storybook isn't expecting these global components to be auto-imported at startup and isn't handling it correctly? I'm not sure how to fix this (yet), but hopefully this might point the maintainers in the right direction.

[rpowersstl]

@cyruscollier I am having the same problem

' ERROR Internal server error: At least one or <script> is required in a single file component.
Plugin: vite:vue'

Did you find a fix for this?

[usrrname]

I can confirm I've come across the same problem in nuxt 3.6.5 with vue 3 components using composition api

[markus-gx]

Still encounter the same error

 ERROR  Internal server error: At least one <template> or <script> is required in a single file component.
  Plugin: vite:vue

It seems it happens due to global components which OP already noticed / explained. But sadly there are some moments you need them :/
Any solutions at all?

[HPieters]

Not sure if it's helpful but I am running into the same issue and can confirm previous comments.

As mentioned before, and also for me, this is caused by a custom module that is using addComponentsDir with global: true. If I disable my custom module everything works great again.

[Ibochkarev]

@chakAs3 Good afternoon

Tell me if there is any news on correcting this problem indicated in the essay and in storybookjs/storybook#21196.

For many months, this has been blocking the launch of a storybook in a large project.

If there is an opportunity to somehow prioritize this problem, we would all be grateful!

[chakAs3]

Hi @Ibochkarev sorry for the inconvenient, i will prioritize this problem doing my best to unblock your launch.

[ralucaserdaru]

Any news on the update ? I cannot use storybook neither because of global components which are created as component.global.vue
Thanks!

[lisaschumann]

I'm running into the same issue when using nuxt-icons :/ At least one <template> or <script> is required in a single file component. Is there an ETA on a fix?

[markus-gx]

I'm running into the same issue when using nuxt-icons :/ At least one <template> or <script> is required in a single file component. Is there an ETA on a fix?

I personally switched to Histoire, which works pretty well. Got everything setup within 30mins. Great solution until this is fixed on Storybook' Side.

[chakAs3]

Sorry I'm busy with other issues, I will check this as soon as possible. It is mainly related to vite plugin versions

[Ibochkarev]

@chakAs3 Good afternoon!
Is there any news on resolving this blocker?

[chakAs3]

@Ibochkarev did you use the latest version as it is working fine . let me know if the issue still occurs

[rpauls]

Quickly checked storybook-nuxt by throwing it via npx storybook-nuxt init into an existing larger Nuxt project (using [email protected] and [email protected].

The error appears to be persisting:

ERROR  Internal server error: At least one <template> or <script> is required in a single file component.
  Plugin: vite:vue
  File: /path/to/project/nuxt/modules/subscription/components/ProductSubscriptionSelection.vue
      at Object.parse$2 [as parse] (/path/to/project/nuxt/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1921:7)
      at createDescriptor (/path/to/project/nuxt/node_modules/@storybook-vue/nuxt/dist/preset.cjs:87:43)
      at transformMain (/path/to/project/nuxt/node_modules/@storybook-vue/nuxt/dist/preset.cjs:2380:34)
      at TransformContext.transform (/path/to/project/nuxt/node_modules/@storybook-vue/nuxt/dist/preset.cjs:2923:16)
      at Object.transform (file:///path/to/project/nuxt/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:51172:62)
      at async loadAndTransform (file:///path/to/project/nuxt/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:53923:29)

[gavmck]

Just updated to @storybook-vue/nuxt here as part of a nuxt 3 upgrade. We have a global component folder for storyblok components (that are not even documented in storybook) and this error blows up storybook.

[Ibochkarev]

@tobiasdiez @chakAs3 Hello!

In https://github.com/nuxt-modules/storybook/releases/tag/v8.1.1 the error continues to block the use of Storybook

 ERROR  Internal server error: At least one <template> or <script> is required in a single file component.                                                                        2:26:19 PM
  Plugin: vite:vue
  File: /Users/ibochkarev/Projects/v3/src/widgets/templates/w-feed-template/w-video-section-template.vue
      at Object.parse$2 [as parse] (/Users/ibochkarev/Projects/v3/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1921:7)
      at createDescriptor (/Users/ibochkarev/Projects/v3/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]_nuxt@_hv7zc5tdoxa7qtmqb6wsfxacpq/node_modules/@storybook-vue/nuxt/dist/preset.cjs:87:43)
      at transformMain (/Users/ibochkarev/Projects/v3/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]_nuxt@_hv7zc5tdoxa7qtmqb6wsfxacpq/node_modules/@storybook-vue/nuxt/dist/preset.cjs:2380:34)
      at TransformContext.transform (/Users/ibochkarev/Projects/v3/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]_nuxt@_hv7zc5tdoxa7qtmqb6wsfxacpq/node_modules/@storybook-vue/nuxt/dist/preset.cjs:2923:16)
      at Object.transform (file:///Users/ibochkarev/Projects/v3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:51172:62)
      at async loadAndTransform (file:///Users/ibochkarev/Projects/v3/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:53923:29)

[alex-cailler]

@tobiasdiez @chakAs3 Hello !

I Have the same problem of @Ibochkarev, with project installed yesterday.

ERROR  Internal server error: At least one <template> or <script> is required in a single file component.
  Plugin: vite:vue
  File: /Users/cailler/Projects/molink/node_modules/nuxt-icon/dist/runtime/IconCSS.vue
      at Object.parse$2 [as parse] (/Users/cailler/Projects/molink/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1923:7)
      at createDescriptor (/Users/cailler/Projects/molink/node_modules/@storybook-vue/nuxt/dist/preset.cjs:87:43)
      at transformMain (/Users/cailler/Projects/molink/node_modules/@storybook-vue/nuxt/dist/preset.cjs:2380:34)
      at TransformContext.transform (/Users/cailler/Projects/molink/node_modules/@storybook-vue/nuxt/dist/preset.cjs:2923:16)
      at Object.transform (file:///Users/cailler/Projects/molink/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:52318:62)
      at async loadAndTransform (file:///Users/cailler/Projects/molink/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:55073:29)

[Archetipo95]

Still present in latest