Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: 7.2.0 breaks Vue JSX types #23819

Closed
floroz opened this issue Aug 12, 2023 · 23 comments
Closed

[Bug]: 7.2.0 breaks Vue JSX types #23819

floroz opened this issue Aug 12, 2023 · 23 comments

Comments

@floroz
Copy link

floroz commented Aug 12, 2023

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
Copy link
Author

floroz commented Aug 12, 2023

cc @chakAs3

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

@chakAs3 chakAs3 self-assigned this Aug 12, 2023
@chakAs3
Copy link
Contributor

chakAs3 commented Aug 12, 2023

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

@floroz
Copy link
Author

floroz commented Aug 12, 2023

@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 floroz changed the title [Bug]: Vue JSX Story types are broken above from 7.2.0 upwards [Bug]: 7.2.0 breaks Vue JSX types Aug 13, 2023
@floroz
Copy link
Author

floroz commented Aug 13, 2023

@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
Copy link
Contributor

chakAs3 commented Aug 13, 2023

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
Copy link
Author

floroz commented Aug 13, 2023

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
Copy link
Contributor

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.

@vanessayuenn vanessayuenn moved this to Empathy Backlog in Core Team Projects Aug 21, 2023
@chakAs3
Copy link
Contributor

chakAs3 commented Aug 21, 2023

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
Copy link
Author

floroz commented Aug 21, 2023

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

@DediWang1990
Copy link

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

@chakAs3
Copy link
Contributor

chakAs3 commented Aug 23, 2023

@DediWang1990 is your issue types only or rendering ?

@DediWang1990
Copy link

@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
Copy link
Contributor

chakAs3 commented Aug 24, 2023

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
Copy link

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
Copy link
Contributor

chakAs3 commented Sep 2, 2023

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

@floroz
Copy link
Author

floroz commented Sep 19, 2023

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

Copy link
Contributor

chakAs3 commented Sep 29, 2023

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

@floroz
Copy link
Author

floroz commented Sep 30, 2023

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
Copy link
Author

floroz commented Dec 8, 2023

@zdjzce
Copy link

zdjzce commented Dec 12, 2023

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.
image

@chakAs3
Copy link
Contributor

chakAs3 commented Jan 17, 2024

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

@chakAs3 chakAs3 closed this as completed Jan 17, 2024
@github-project-automation github-project-automation bot moved this from Empathy Backlog to Done in Core Team Projects Jan 17, 2024
@axwalker
Copy link

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
Copy link

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

No branches or pull requests

8 participants