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.
Describe the bug
I encounter the following error when importing a type from another Vue component in a TypeScript Vue 3 setup:
I created a
Button.vue
component with aButtonProps
type exported:I created another component (
Issue.vue
) and tried to importButtonProps
usingimport type
: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
System
Additional context
No response