[Bug]: 7.2.0 breaks Vue JSX types

[floroz]

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.

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

[floroz]

cc @chakAs3

repository is private but the issue has been verified across two different environments/machines

[chakAs3]

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

[floroz]

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

@chakAs3 I forked you custom-render project and create a reproduction for the error: https://github.com/floroz/storybook-vue-custom-render/tree/bug/jsx-error-storybook

If you pnpm install and go to src/stories/JSXComponent.stories.tsx you should see the TS error

[floroz]

@chakAs3 I spent some time looking into the issue and found that:

• the first release introducing the regression is 7.2.0-rc.0.
• is not just polluting the types in JSXComponent.stories.tsx, but also JSXComp.tsx.

I suspect the regression was introduced by #23574

I tried to fork the Storybook repo and reverted type-fest to ^3.11 but, while creating a Vue TSX component under code/renderers/vue3/template/components I have a lot of interference from other type defs across the project treating .tsx files as React files.

Happy to continue troubleshooting this myself but I might need some assistance from your side (although I suspect you could verify this quite quickly).

[chakAs3]

hi @floroz i doubt that there is a regression, i think you were using my fork which support fully JSX, i may have to update it as the maybe a version conflict

[floroz]

hi @floroz i doubt that there is a regression, i think you were using my fork which support fully JSX, i may have to update it as the maybe a version conflict

@chakAs3 I used your fork just as a boilerplate starting point, but I replaced the dependencies to point at the published version of storybook, not your renderer.

If you check out that branch that I linked in the fork you should see the reproduction of the same error we have in our company project.

You can create a project from scratch and install 7.2.0 and create a Vue JSX Component, you should still see the error.

[vanessayuenn]

Note to core team: Aside from figuring out what's causing this issue, we should also add tests for Vue JSX to prevent this from breaking again.

[chakAs3]

Hi @vanessayuenn, the main reason is the renderer implementation that should be done properly, i have a repo with all type of custom render functions including JSX
you can check my repo on Stackblitz i have add tests as well https://stackblitz.com/~/github.com/storybook-vue/storybook-vue-custom-render

@floroz can please check as well if it is working i updated the fork

[floroz]

@chakAs3 which is the updated fork you are referring to?

[DediWang1990]

@chakAs3 hi, I have also encountered this issue. Is there any latest progress? thanks

[chakAs3]

@DediWang1990 is your issue types only or rendering ?

[DediWang1990]

@chakAs3 only types. When using version 7.1.0 before, the type of args could be correctly obtained. However, after upgrading to the latest version, the type of args has been broken. By the way, I also use JSX.

[chakAs3]

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

[treardon17]

I'm also having this issue. I can resolve some of the errors by doing something like this (but is not really a viable solution):

import { JSXComponent } from 'vue';
import BButton from '@/components/BButton';

const JsxButton: JSXComponent = BButton;

const render = () => <JsxButton />;

[chakAs3]

@treardon17 no worries i will get this fixed once i got sometime, after the release of Nuxt-Storybook module

[floroz]

Hey @chakAs3, I appreciate you have a lot on your plate, but was wondering if you had the chance to look at this issue?

It's currently blocking projects using JSX to upgrade from 7.2.0 upwards

[chakAs3]

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

[floroz]

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]

For everyone bumping into this, we ended up migrating away from JSX since we also found some conflicts between global JSX types propagated by @types/react and the global one from vue.

Relates to:

• Volar breaks @types/react in monorepo when using takeover mode vuejs/language-tools#3355
• refactor: Removing __VLS_types.d.ts vuejs/language-tools#3534
• Make JSX typings an optional install as they conflict with React TSX vuejs/core#1033
• feat(jsx-types): namespace JSX types vuejs/core#7083
• feat(types/jsx): support jsxImportSource, avoid global JSX conflict vuejs/core#7958
• Support a 'vue' option for JSX in .tsx files microsoft/TypeScript#13260

[zdjzce]

I have the same issue, but when I removed some dependencies from package.json, the error of "ReactNode does not exist" no longer appears. However, a new problem has arisen: the controllers of StoryBook do not show up, even though autodocs is indeed effective. This is so strange.

[chakAs3]

For everyone bumping into this, we ended up migrating away from JSX since we also found some conflicts between global JSX types propagated by @types/react and the global one from vue.

yes the conflicts come from storybook requires react even in Vue project, we are working on dropping this in v8, so you can go back to JSX If it necessary

[axwalker]

Is this React dependency also going to be dropped for @storybook/addon-docs? I see it is still required in the latest version - 8.0.0-rc.5. This is the only thing blocking a standard Vue/Storybook 8 project now where JSX is used within Vue components. When I removed addon-docs TypeScript is happy!

[yinmingdi]

Is this React dependency also going to be dropped for @storybook/addon-docs? I see it is still required in the latest version - 8.0.0-rc.5. This is the only thing blocking a standard Vue/Storybook 8 project now where JSX is used within Vue components. When I removed addon-docs TypeScript is happy!这个 React 依赖项也会被 @storybook/addon-docs 删除吗？我看到最新版本 - 8.0.0-rc.5 仍然需要它。这是现在唯一阻止标准 Vue/Storybook 8 项目在 Vue 组件中使用 JSX 的东西。当我删除 addon-docs 时，TypeScript 很高兴！

Hey！Maybe you can try this one

vuejs/language-tools#592 (comment)