storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.68k stars 9.32k forks source link

[Bug]: Importing type from another Vue component breaks storybook #29234

Open nbaroiller opened 1 month ago

nbaroiller commented 1 month ago

Describe the bug

I encounter the following error when importing a type from another Vue component in a TypeScript Vue 3 setup:

15:26:47 [vite] Internal server error: Unexpected token, expected "</>/<=/>=" (2:10)
  Plugin: storybook:vue-docgen-plugin
  File: /home/projects/github-6e1nvm/src/stories/Issue.vue:8:7
  1  |  import { defineComponent as _defineComponent } from "vue";
     |                       ^
  2  |  import Button from "./Button.vue";
  3  |  const _sfc_main = /* @__PURE__ */ _defineComponent({
      at constructor (file:///home/projects/github-6e1nvm/node_modules/@babel/parser/lib/index.js#cjs:362:19)
      at TypeScriptParserMixin.raise (file:///home/projects/github-6e1nvm/node_modules/@babel/parser/lib/index.js#cjs:3260:19)
      at TypeScriptParserMixin.unexpected (file:///home/projects/github-6e1nvm/node_modules/@babel/parser/lib/index.js#cjs:3280:16)
      at TypeScriptParserMixin.expect (file:///home/projects/github-6e1nvm/node_modules/@babel/parser/lib/index.js#cjs:3590:12)
      at TypeScriptParserMixin.tsParseTypeAssertion (file:///home/projects/github-6e1nvm/node_modules/@babel/parser/lib/index.js#cjs:8447:10)
      at TypeScriptParserMixin.parseMaybeUnary (file:///home/projects/github-6e1nvm/node_modules/@babel/parser/lib/index.js#cjs:9475:19)
      at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (file:///home/projects/github-6e1nvm/node_modules/@babel/parser/lib/index.js#cjs:10403:61)
      at TypeScriptParserMixin.parseExprOps (file:///home/projects/github-6e1nvm/node_modules/@babel/parser/lib/index.js#cjs:10408:23)
      at TypeScriptParserMixin.parseMaybeConditional (file:///home/projects/github-6e1nvm/node_modules/@babel/parser/lib/index.js#cjs:10385:23)
      at TypeScriptParserMixin.parseMaybeAssign (file:///home/projects/github-6e1nvm/node_modules/@babel/parser/lib/index.js#cjs:10348:21)
15:26:47 [vite] Pre-transform error: Unexpected token, expected "</>/<=/>=" (2:10)

I created a Button.vue component with a ButtonProps type exported:

export type ButtonProps = {
  /**
   * The label of the button
   */
  label: string;
  /**
   * primary or secondary button
   */
  primary?: boolean;
  /**
   * size of the button
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * background color of the button
   */
  backgroundColor?: string;
};

I created another component (Issue.vue) and tried to import ButtonProps using import type:

import Button from './Button.vue';
import type { ButtonProps } from './Button.vue';

const props = withDefaults(defineProps<ButtonProps>(), { primary: false });

I am not sure why this error occurs, and any guidance or help would be greatly appreciated. If it's a known issue with vue-docgen-plugin, please let me know of a potential workaround or fix.

Reproduction link

https://stackblitz.com/edit/github-6e1nvm?file=src%2Fstories%2FIssue.vue

Reproduction steps

  1. Go to above link
  2. Hover on the sidebar: this raises the error overlay.
  3. Click on Issue/Docs: the component failed to render properly ("Failed to fetch dynamically imported module: [...]/src/stories/Issue.stories.ts")

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    @storybook/addon-interactions: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    @storybook/addon-onboarding: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    @storybook/blocks: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    @storybook/test: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    @storybook/vue3: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    @storybook/vue3-vite: ^8.4.0-alpha.1 => 8.4.0-alpha.1 
    storybook: ^8.4.0-alpha.1 => 8.4.0-alpha.1

Additional context

No response