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 failing vue-tsc check.

The Stories are still working correctly but all files now contain JSX errors.

Screenshot 2023-08-12 at 10 50 57

Screenshot 2023-08-12 at 10 51 07

Screenshot 2023-08-12 at 10 51 59

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 contains defineProps and defineSlots
  • 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)

Most upvoted comments

I also use JSX

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

hi @floroz please create the repo for me with your issue, easier for me as reference to fix.

@chakAs3 https://github.com/floroz/storybook-jsx-bug-720

You can see the error in src/stories/Button.stories.tsx

src/stories/Button.stories.tsx:17:26 - error TS2786: 'Button' cannot be used as a JSX component.
  Its type 'DefineComponent<{ label: { type: PropType<string>; required: true; }; primary: { type: PropType<boolean>; default: boolean; }; size: { type: PropType<"small" | "medium" | "large">; }; backgroundColor: { ...; }; }, ... 11 more ..., {}>' is not a valid JSX element type.
    Type 'DefineComponent<{ label: { type: PropType<string>; required: true; }; primary: { type: PropType<boolean>; default: boolean; }; size: { type: PropType<"small" | "medium" | "large">; }; backgroundColor: { ...; }; }, ... 11 more ..., {}>' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
      Type '{ $: ComponentInternalInstance; $data: {}; $props: { primary?: boolean | undefined; readonly label: string; style?: unknown; onClick?: ((id: number) => any) | undefined; ... 12 more ...; onVnodeUnmounted?: VNodeMountHook | ... 1 more ... | undefined; }; ... 10 more ...; $watch<T extends string | ((...args: any) => a...' is missing the following properties from type 'Component<any, any, any>': context, setState, forceUpdate, render, and 3 more.

17       return () => <div><Button {...args} /></div>

@floroz let me check it out we did not have any major update for Vue between these version but i will investigate this