storybook: [Bug]: `7.2.0` breaks Vue JSX types
Describe the bug
After upgrading from our last version 7.1.0
to 7.2.0
or 7.3.0-alpha
, all our Vue JSX Stories are now broken.
7.1.0
is stable and types are working correctly- from
7.2.0
upwards all the types in JSX stories are broken and failingvue-tsc
check.
The Stories are still working correctly but all files now contain JSX errors.
This is the blueprint for all our Stories setup using Vue 3 (script setup
) and JSX.
const meta: Meta<typeof BButton> = {
title: "Components/Button",
component: BButton,
tags: ["autodocs"],
argTypes: {
colorScheme: {
options: COLOR_SCHEMES.filter((color) => color !== "grey"),
},
size: {
options: ["sm", "md", "lg"],
},
variant: {
options: ["primary", "secondary"],
},
},
args: {
"colorScheme": "blue",
"default": "Click Me",
},
render: (args) => ({
setup() {
return () => (
<BButton {...args}>
{{
default: () => args.default,
...(args["left-icon"] && {
"left-icon": args["left-icon"],
}),
...(args["right-icon"] && {
"right-icon": args["right-icon"],
}),
}}
</BButton>
);
},
}),
};
export default meta;
type Story = StoryObj<typeof BButton>;
export const Default: Story = {};
Our tsconfigs:
{
"extends": "../../config/tsconfig.vite.json",
"include": [
"src/**/*",
"src/**/*.vue",
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.d.ts"
],
"exclude": ["node_modules", "dist"],
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}
/* tsconfig.vite.json*/
{
/* Shared Options for Packages using Vite as their bundler (esbuild/rollup)*/
"compilerOptions": {
"jsx": "preserve",
"module": "ESNext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"target": "ESNext",
/* https://vitejs.dev/guide/features.html#usedefineforclassfields */
"useDefineForClassFields": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
/* this is required for Vite */
"isolatedModules": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"],
/* Vue workaround to support isolated modules: https://vitejs.dev/guide/features.html#isolatedmodules */
"skipLibCheck": true,
/* https://vuejs.org/guide/typescript/overview.html#configuring-tsconfig-json */
"strict": true,
/* https://vuejs.org/guide/typescript/overview.html#configuring-tsconfig-json */
"noImplicitThis": true,
"noEmit": true
}
}
To Reproduce
- Create a component using
<script setup lang="ts" />
syntax which containsdefineProps
anddefineSlots
- Create a component story in JSX following the blueprint above.
- Run
vue-tsc
against those stories
System
Environment Info:
`typescript`: 5.1.6
`vue-tsc`: 1.8.8
System:
OS: macOS 13.1
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Binaries:
Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
Browsers:
Chrome: 115.0.5790.170
Safari: 16.2
Additional context
No response
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 2
- Comments: 23 (9 by maintainers)
JSX a good option to have consistent rendering API, easy to migrate your code between React/ Vue / Preact / Lit.
i will investigate about this Type issue, i think maily is the new vue-tsc
@chakAs3 https://github.com/floroz/storybook-jsx-bug-720
You can see the error in
src/stories/Button.stories.tsx
@floroz let me check it out we did not have any major update for Vue between these version but i will investigate this