Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
nbaroiller opened this issue Sep 27, 2024 · 1 comment
Open

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

nbaroiller opened this issue Sep 27, 2024 · 1 comment

Comments

@nbaroiller
Copy link

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

@jack-allocate
Copy link

Also experiencing this, get failed to dynamically import module.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants