[Bug]: `7.2.0` breaks Vue JSX types

floroz commented 1 year ago

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

floroz commented 1 year ago

cc @chakAs3

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

chakAs3 commented 1 year ago

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

floroz commented 1 year ago

@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 commented 1 year ago

@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 https://github.com/storybookjs/storybook/pull/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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

DediWang1990 commented 1 year ago

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

chakAs3 commented 1 year ago

@DediWang1990 is your issue types only or rendering ?

DediWang1990 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

floroz commented 1 year ago

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 commented 11 months ago

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

floroz commented 11 months ago

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 commented 9 months ago

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:

zdjzce commented 9 months ago

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 commented 8 months ago

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 commented 6 months ago

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 commented 4 months ago

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

https://github.com/vuejs/language-tools/discussions/592#discussioncomment-2163181

storybookjs / storybook