At least one <template> or <script> is required in a single file component #527

Javid-Izadfar · 2023-05-06T07:03:12Z

Describe the bug

I'm receiving At least one <template> or <script> is required in a single file component for every .story.vue file I've got on a Nuxt3 (@3.3.2 and @3.4.3) project.

Reproduction

https://stackblitz.com/edit/histoire-vue3-starter-wlv4el?file=package.json

System Info

System:
    OS: Linux 5.10 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 3.70 GB / 7.72 GB
    Container: Yes
    Shell: 5.0.16 - /bin/bash
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    npm: 9.6.3 - ~/.nvm/versions/node/v18.15.0/bin/npm
  npmPackages:
    @histoire/plugin-nuxt: 0.16.1 => 0.16.1 
    @histoire/plugin-vue: 0.16.1 => 0.16.1 
    histoire: 0.16.1 => 0.16.1

Used Package Manager

npm

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A open a GitHub Discussion.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

stackblitz · 2023-05-06T07:03:14Z

Start a new pull request in StackBlitz Codeflow.

histoire-vue3-starter-wlv4el (Open reproduction)

danlourenco · 2023-05-10T01:51:28Z

Getting the same thing.

samplep182 · 2023-05-12T00:54:12Z

Facing same issue on MacOS using pnpm.

romainl · 2023-05-26T06:29:31Z

FWIW, removing any reference to @histoire/plugin-nuxt from histoire.config.ts made the error disappear:

import { defineConfig } from "histoire";
import { HstVue } from "@histoire/plugin-vue";
// import { HstNuxt } from "@histoire/plugin-nuxt";

export default defineConfig({
  plugins: [
    HstVue(),
    // HstNuxt()
  ],
});

which is rather surprising since the stack trace doesn't mention plugin-nuxt at all:

Error while collecting story /Users/username/project/components/Meow.story.vue:
SyntaxError: At least one <template> or <script> is required in a single file component.
    at Object.parse$4 [as parse] (/Users/username/project/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:5269:21)
    at createDescriptor (/Users/username/project/node_modules/@vitejs/plugin-vue/dist/index.cjs:74:43)
    at transformMain (/Users/username/project/node_modules/@vitejs/plugin-vue/dist/index.cjs:2277:34)
    at TransformContext.transform (/Users/username/project/node_modules/@vitejs/plugin-vue/dist/index.cjs:2798:16)
    at Object.transform (file:///Users/username/project/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:42883:44)
    at async loadAndTransform (file:///Users/username/project/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:53349:29)

…and doesn't really help, since we are using Histoire in a Nuxt 3 project (autoloading and all).

If it helps, I logged descriptor ONCE to the console in /Users/username/project/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js (which, I am aware is not part of this project):

console.log('descriptor', descriptor); // eslint-disable-line
if (!descriptor.template && !descriptor.script && !descriptor.scriptSetup) {
    errors.push(new SyntaxError(`At least one <template> or <script> is required in a single file component.`));
}

The output is below:

descriptor {
  filename: '/Users/username/project/components/Meow.story.vue',
  source: '<script>\n' +
    'console.log("Meow");\n' +
    '</script>\n' +
    '<template>\n' +
    '  <Story title="Meow">\n' +
    '    <Variant title="One Meow"> 🐱 </Variant>\n' +
    '    <Variant title="Two Meows"> 🐱🐱 </Variant>\n' +
    '    <Variant title="Three Meows"> 🐱🐱🐱 </Variant>\n' +
    '  </Story>\n' +
    '</template>\n',
  template: {
    type: 'template',
    content: '\n' +
      '  <Story title="Meow">\n' +
      '    <Variant title="One Meow"> 🐱 </Variant>\n' +
      '    <Variant title="Two Meows"> 🐱🐱 </Variant>\n' +
      '    <Variant title="Three Meows"> 🐱🐱🐱 </Variant>\n' +
      '  </Story>\n',
    loc: {
      source: '\n' +
        '  <Story title="Meow">\n' +
        '    <Variant title="One Meow"> 🐱 </Variant>\n' +
        '    <Variant title="Two Meows"> 🐱🐱 </Variant>\n' +
        '    <Variant title="Three Meows"> 🐱🐱🐱 </Variant>\n' +
        '  </Story>\n',
      start: [Object],
      end: [Object]
    },
    attrs: {},
    ast: {
      type: 1,
      ns: 0,
      tag: 'template',
      tagType: 0,
      props: [],
      isSelfClosing: false,
      children: [Array],
      loc: [Object],
      codegenNode: undefined
    }
  },
  script: {
    type: 'script',
    content: '\nconsole.log("Meow");\n',
    loc: {
      source: '\nconsole.log("Meow");\n',
      start: [Object],
      end: [Object]
    },
    attrs: {}
  },
  scriptSetup: null,
  styles: [],
  customBlocks: [],
  cssVars: [],
  slotted: false,
  shouldForceReload: [Function: shouldForceReload]
}
descriptor {
  filename: '/Users/username/project/components/Meow.story.vue',
  source: '\n' +
    'console.log("Meow");\n' +
    '\n' +
    'const _sfc_main = {}\n' +
    'import { createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"\n' +
    '\n' +
    'function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {\n' +
    '  const _component_Variant = _resolveComponent("Variant")\n' +
    '  const _component_Story = _resolveComponent("Story")\n' +
    '\n' +
    '  return (_openBlock(), _createBlock(_component_Story, { title: "Meow" }, {\n' +
    '    default: _withCtx(() => [\n' +
    '      _createVNode(_component_Variant, { title: "One Meow" }, {\n' +
    '        default: _withCtx(() => [\n' +
    '          _createTextVNode(" 🐱 ")\n' +
    '        ]),\n' +
    '        _: 1 /* STABLE */\n' +
    '      }),\n' +
    '      _createVNode(_component_Variant, { title: "Two Meows" }, {\n' +
    '        default: _withCtx(() => [\n' +
    '          _createTextVNode(" 🐱🐱 ")\n' +
    '        ]),\n' +
    '        _: 1 /* STABLE */\n' +
    '      }),\n' +
    '      _createVNode(_component_Variant, { title: "Three Meows" }, {\n' +
    '        default: _withCtx(() => [\n' +
    '          _createTextVNode(" 🐱🐱🐱 ")\n' +
    '        ]),\n' +
    '        _: 1 /* STABLE */\n' +
    '      })\n' +
    '    ]),\n' +
    '    _: 1 /* STABLE */\n' +
    '  }))\n' +
    '}\n' +
    '\n' +
    '\n' +
    "import _export_sfc from '\x00plugin-vue:export-helper'\n" +
    `export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"/Users/username/project/components/Meow.story.vue"]])`,
  template: null,
  script: null,
  scriptSetup: null,
  styles: [],
  customBlocks: [],
  cssVars: [],
  slotted: false,
  shouldForceReload: [Function: shouldForceReload]
}

Observations:

descriptor is logged twice
it seems OK the first time, with template and script members that look like what I have in my file
which shouldn't trigger the error
but, the second time, the source is not the actual content of the file but the JavaScript that would result from its compilation, which can't be parsed like a regular SFC
so there is no template or script anymore
which triggers the error

Hypothesis:

A first pass is made by either plugin-vue or plugin-nuxt, with the actual content of the file, which seems to "work", but there is a second pass that uses a JavaScript representation of the content of the file, which doesn't work.
The fact that there are two passes is IMO the root cause of all this.

No Storybook, no Histoire… The "stories" situation is not very good at the moment for Nuxt 3 users.

DanielleConstell · 2023-05-26T11:05:01Z

Also having this issue with a complete clean nuxt install and these packages;
"@histoire/plugin-nuxt": "^0.16.1",
"@histoire/plugin-vue": "^0.16.1",
"histoire": "^0.16.1",
"nuxt": "^3.5.1",

Removing any reference to @histoire/plugin-nuxt from histoire.config.ts caused other errors

awacode21 · 2023-06-02T10:54:53Z

i am currently migrating my vue project to a nuxt project. But i also get this issue with histoire which makes it impossible to use histoire with nuxt3. Any idea or workaround?

romainl · 2023-06-07T07:24:26Z

@awacode21 our current workaround is to keep Nuxt out of our components as much as possible. It sort of gives us the benefits of agnosticism (for some meaning of agnosticism), but Nuxt's auto-imports and all are hard to let go :-(.

ramonakira · 2023-06-08T13:12:27Z

I am also experiencing this issue.

t0byman · 2023-06-08T20:17:34Z

I am also experiencing this issue.

fingm-t · 2023-06-15T15:08:33Z

I am also experiencing this issue.

romainl · 2023-06-22T13:26:45Z

Upgrading "@histoire/plugin-nuxt" to 0.16.2 somewhat made the error and stack trace go away, but there is still no Nuxt autoloading or other Nuxt-provided features.

ianjamieson · 2023-07-08T16:10:05Z

I am getting this error when using histoire with a nuxt module that I am creating.

In my module configuration I have this to import the components:

  hooks: {
    'components:dirs'(dirs) {
      dirs.push({
        path: fileURLToPath(new URL('./runtime/components', import.meta.url)),
        prefix: 'Tx',
      });
    },
    'imports:dirs'(dirs) {
      dirs.push(fileURLToPath(new URL('./runtime/composables', import.meta.url)));
      dirs.push(fileURLToPath(new URL('./runtime/enums', import.meta.url)));
    },
  },

Which works ok, but when I add the global: true option (so I can auto import components with the :is directive), like this:

  hooks: {
    'components:dirs'(dirs) {
      dirs.push({
        path: fileURLToPath(new URL('./runtime/components', import.meta.url)),
        prefix: 'Tx',
       global: true
      });
    }
  },

This is when I get the error mentioned above.

nashtonentwined · 2023-07-25T16:23:57Z

I managed to get passed this issue by editing @historie/plugin-nuxt/dist/index.js and resolving with the vuePlugins but not updating the config object.

nuxt.hook('vite:extendConfig', (config, { isClient }) => {
                    // @ts-ignore
                    if (isClient) {
                      const plugins = []  // <-----------
                        for (const name in vuePlugins) {
                            if (!config.plugins?.some(p => p?.name === name)) {
                                const [plugin, key] = vuePlugins[name];
                                // @ts-ignore
                                // config.plugins.push(plugin(config[key]));
                                plugins.push(plugin(config[key]));  // <-----------
                            }
                        }

                        resolve({
                          ...config,
                          plugins: [  // <-----------
                            ...config.plugins,  // <-----------
                            ...plugins,  // <-----------
                          ],  // <-----------
                        });
                    }
                });

This stopped the files from compiling twice, although i still have the same issue when using for example nuxt-icon package.

cutugno01 · 2023-07-28T10:50:17Z

I managed to get passed this issue by editing @historie/plugin-nuxt/dist/index.js and resolving with the vuePlugins but not updating the config object.

nuxt.hook('vite:extendConfig', (config, { isClient }) => {
                    // @ts-ignore
                    if (isClient) {
                      const plugins = []  // <-----------
                        for (const name in vuePlugins) {
                            if (!config.plugins?.some(p => p?.name === name)) {
                                const [plugin, key] = vuePlugins[name];
                                // @ts-ignore
                                // config.plugins.push(plugin(config[key]));
                                plugins.push(plugin(config[key]));  // <-----------
                            }
                        }

                        resolve({
                          ...config,
                          plugins: [  // <-----------
                            ...config.plugins,  // <-----------
                            ...plugins,  // <-----------
                          ],  // <-----------
                        });
                    }
                });

This stopped the files from compiling twice, although i still have the same issue when using for example nuxt-icon package.

This seems to be working for me.
It is also solving an error in @nuxt/devtools/dist/runitme/plugins/view/Main.vue indicating to import type { CSSProperties } from 'vue'

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>

samuveth · 2023-09-11T05:55:04Z

I'm still getting this error for 'nuxt-icon' and 'nuxt-icons' plugins.

[vite:vue] At least one <template> or <script> is required in a single file component.
file: /Users/sam/dev/clones/nuxt-tune/node_modules/nuxt-icon/dist/runtime/Icon.vue?nuxt_component=async
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

SyntaxError: At least one <template> or <script> is required in a single file component.
    at Object.parse$2 [as parse] (/Users/sam/dev/clones/nuxt-tune/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1275:7)
    at createDescriptor (/Users/sam/dev/clones/nuxt-tune/node_modules/@vitejs/plugin-vue/dist/index.cjs:84:43)
    at transformMain (/Users/sam/dev/clones/nuxt-tune/node_modules/@vitejs/plugin-vue/dist/index.cjs:2282:34)
    at Object.transform (/Users/sam/dev/clones/nuxt-tune/node_modules/@vitejs/plugin-vue/dist/index.cjs:2814:16)
    at /Users/sam/dev/clones/nuxt-tune/node_modules/vite-plugin-inspect/dist/index.cjs:932:28
    at Object.plugin2.<computed> (/Users/sam/dev/clones/nuxt-tune/node_modules/vite-plugin-inspect/dist/index.cjs:919:16)
    at file:///Users/sam/dev/clones/nuxt-tune/node_modules/rollup/dist/es/shared/node-entry.js:25518:40 {
  id: '/Users/sam/dev/clones/nuxt-tune/node_modules/nuxt-icon/dist/runtime/Icon.vue?nuxt_component=async',
  plugin: 'vite:vue',
  name: 'RollupError',
  hook: 'transform',
  code: 'PLUGIN_ERROR',
  watchFiles: [
    '/Users/sam/dev/clones/nuxt-tune/node_modules/@histoire/app/dist/bundle-main.js',
    '/Users/sam/dev/clones/nuxt-tune/node_modules/@histoire/app/dist/bundle-sandbox.js',
    '/Users/sam/dev/clones/nuxt-tune/node_modules/@histoire/app/dist/bundled/sandbox.js',
    '/Users/sam/dev/clones/nuxt-tune/node_modules/@histoire/app/dist/app/style/sandbox.css',
    '/Users/sam/dev/clones/nuxt-tune/node_modules/@histoire/app/dist/bundled/index.js',
    '/Users/sam/dev/clones/nuxt-tune/node_modules/@histoire/app/dist/style.css',
    '/Users/sam/dev/clones/nuxt-tune/node_modules/@histoire/app/dist/bundled/style.css',
    
    ```

Javid-Izadfar added the to triage This issue needs to be triaged label May 6, 2023

guilhermesdev mentioned this issue Aug 6, 2023

fix(nuxt): nuxt plugin error (fix #527) #575

Merged

10 tasks

Akryum closed this as completed in #575 Aug 13, 2023

Akryum added a commit that referenced this issue Aug 13, 2023

fix(nuxt): nuxt plugin error (fix #527) (#575)

f879e7b

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>

samuveth mentioned this issue Sep 11, 2023

At least one <template> or <script> is required in a single file component #590

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

At least one <template> or <script> is required in a single file component #527

At least one <template> or <script> is required in a single file component #527

Javid-Izadfar commented May 6, 2023

stackblitz bot commented May 6, 2023

danlourenco commented May 10, 2023

samplep182 commented May 12, 2023

romainl commented May 26, 2023 •

edited

DanielleConstell commented May 26, 2023 •

edited

awacode21 commented Jun 2, 2023

romainl commented Jun 7, 2023

ramonakira commented Jun 8, 2023

t0byman commented Jun 8, 2023

fingm-t commented Jun 15, 2023

romainl commented Jun 22, 2023 •

edited

ianjamieson commented Jul 8, 2023

nashtonentwined commented Jul 25, 2023 •

edited

cutugno01 commented Jul 28, 2023

samuveth commented Sep 11, 2023

At least one <template> or <script> is required in a single file component #527

At least one <template> or <script> is required in a single file component #527

Comments

Javid-Izadfar commented May 6, 2023

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

stackblitz bot commented May 6, 2023

danlourenco commented May 10, 2023

samplep182 commented May 12, 2023

romainl commented May 26, 2023 • edited

DanielleConstell commented May 26, 2023 • edited

awacode21 commented Jun 2, 2023

romainl commented Jun 7, 2023

ramonakira commented Jun 8, 2023

t0byman commented Jun 8, 2023

fingm-t commented Jun 15, 2023

romainl commented Jun 22, 2023 • edited

ianjamieson commented Jul 8, 2023

nashtonentwined commented Jul 25, 2023 • edited

cutugno01 commented Jul 28, 2023

samuveth commented Sep 11, 2023

romainl commented May 26, 2023 •

edited

DanielleConstell commented May 26, 2023 •

edited

romainl commented Jun 22, 2023 •

edited

nashtonentwined commented Jul 25, 2023 •

edited