Storybook v6 + vue + tsx -> tsc errors: conflict types with @types/react

[voskresla]

Describe the bug After migration from 5.2 to 6 npx tsc throw errors:

• Property 'class' does not exist on type 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>'
• Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<...>, Record<...>>'.

To Reproduce Steps to reproduce the behavior:

1. Clone 'https://github.com/voskresla/sb-migrate-reproduce'
2. Run 'npm i && npx tsc'

Expected behavior No errors )

Screenshots

Code snippets

System: Environment Info:

System: OS: macOS 10.15.4 CPU: (8) x64 Intel(R) Core(TM) i7-8557U CPU @ 1.70GHz Binaries: Node: 14.8.0 - ~/.nvm/versions/node/v14.8.0/bin/node npm: 6.14.7 - ~/.nvm/versions/node/v14.8.0/bin/npm Browsers: Chrome: 85.0.4183.102 Firefox: 80.0.1 Safari: 13.1 npmPackages: @storybook/addon-knobs: ^6.0.21 => 6.0.21 @storybook/source-loader: ^6.0.21 => 6.0.21 @storybook/vue: ^6.0.21 => 6.0.21

Additional context Package @types/react came as deps for @types/react-color and @types/react-syntax-highlighter

If delete types rm -rf ./node_modules/@types/react, everything works like a charm.

Or i can use path in tsconfig to solve this.

compilerOptions.path = {
      "react": ["./nothins.d.ts"],
}

[ProTip]

Seeing the same in 5.3.19. Those should probably be listed as dev dependencies?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[YuJianghao]

Is this the same problem?

Seems @vue/runtime-dom has conflicts with @types/react

error outputs:

node_modules/@types/react/index.d.ts:120:51 - error TS2344: Type 'C' does not satisfy the constraint 'ElementType<any>'.
  Type 'keyof IntrinsicElements | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any, context?: any) => ReactElement<...> | null)' is not assignable to type 'ElementType<any>'.
    Type 'number' is not assignable to type 'ElementType<any>'.
      Type 'C' is not assignable to type 'FunctionComponent<any>'.
        Type 'keyof IntrinsicElements | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any, context?: any) => ReactElement<...> | null)' is not assignable to type 'FunctionComponent<any>'.
          Type 'string' is not assignable to type 'FunctionComponent<any>'.

120         "ref" extends keyof ComponentPropsWithRef<C>
                                                      ~

node_modules/@types/react/index.d.ts:121:49 - error TS2344: Type 'C' does not satisfy the constraint 'ElementType<any>'.
  Type 'C' is not assignable to type 'FunctionComponent<any>'.

121             ? NonNullable<ComponentPropsWithRef<C>["ref"]> extends Ref<
                                                    ~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1493:15 - error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'.
  Named property 'key' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical.

1493     interface Element extends VNode {}
                   ~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1493:15 - error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'.
  Named property 'props' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical.

1493     interface Element extends VNode {}
                   ~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1493:15 - error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'.
  Named property 'type' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical.

1493     interface Element extends VNode {}
                   ~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1500:15 - error TS2430: Interface 'IntrinsicElements' incorrectly extends interface 'NativeElements'.
  Types of property 'a' are incompatible.
    Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>' is not assignable to type 'ElementAttrs<AnchorHTMLAttributes>'.
      Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>' is not assignable to type 'AnchorHTMLAttributes'.
        Types of property ''aria-relevant'' are incompatible.
          Type '"all" | "text" | "additions" | "additions text" | "removals" | "additions removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined' is not assignable to type '"all" | "text" | "additions" | "additions text" | "removals" | undefined'.
            Type '"additions removals"' is not assignable to type '"all" | "text" | "additions" | "additions text" | "removals" | undefined'.

1500     interface IntrinsicElements extends NativeElements {
                   ~~~~~~~~~~~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1505:15 - error TS2320: Interface 'IntrinsicAttributes' cannot simultaneously extend types 'ReservedProps' and 'Attributes'.
  Named property 'key' of types 'ReservedProps' and 'Attributes' are not identical.

1505     interface IntrinsicAttributes extends ReservedProps {}
                   ~~~~~~~~~~~~~~~~~~~


Found 7 errors.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

My versions:

    "@babel/core": "^7.15.5",
    "@storybook/addon-actions": "^6.3.8",
    "@storybook/addon-essentials": "^6.3.8",
    "@storybook/addon-links": "^6.3.8",
    "@storybook/vue3": "^6.3.8",
    "@vitejs/plugin-vue": "^1.6.1",
    "@vue/compiler-sfc": "^3.2.6",
    "babel-loader": "^8.2.2",
    "less": "^4.1.1",
    "less-loader": "^7",
    "typescript": "^4.3.2",
    "vite": "^2.5.4",
    "vue-loader": "^16.5.0",
    "vue-tsc": "^0.2.2"

[jakehamilton]

I'm also experiencing this issue on a Preact-based project. The error shows up in VSCode, but compilation actually works fine:

It's mostly an annoyance, but would be great if we can get it sorted since it introduces more confusion when developing.

---

Packages being used:

        "@babel/core": "^7.15.0",
        "@storybook/addon-actions": "6.4.0-alpha.33",
        "@storybook/addon-essentials": "6.4.0-alpha.33",
        "@storybook/addon-links": "6.4.0-alpha.33",
        "@storybook/preact": "6.4.0-alpha.33",
        "babel-loader": "^8.2.2",
        "core-js": "^3.16.4",
        "storybook-builder-vite": "0.0.12",
        "typescript": "^4.5.0-dev.20210831",
        "vite": "^2.6.7",
        "@preact/preset-vite": "^2.1.0",
        "@mdx-js/preact": "^2.0.0-next.9",
        "@storybook/addon-storysource": "6.4.0-alpha.33",

[mmmbacon]

Same issue here. Builds are breaking because of this.

It was also very hard to find this issue on google. Took me a couple hours to find this thread...

"devDependencies": {
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/vue3": "^6.3.12",
....

[cwillinx]

Same in my case, only rm -rf ./node_modules/@types/react seems to help...

[SachaAvazashvili]

Same in my case, only rm -rf ./node_modules/@types/react seems to help...

Had the same issue, had to add a prebuild hook script to delete that folder if it exists with rimraf:

  "scripts": {
    "prebuild": "rimraf ./node_modules/@types/react",
    "build": "vue-tsc --noEmit && vite build",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },

[tft7000]

You might want to check out https://github.com/johnsoncodehk/volar/discussions/592 for additional workarounds.

[RegisFrey]

I have a monorepo with a couple libraries and a couple apps (all vue and typescript) .

I originally had tons of errors in the format:

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1502:15 - error TS2320: Interface 'IntrinsicElements' cannot simultaneously extend types 'NativeElements' and 'NativeElements'.
  Named property 'webview' of types 'NativeElements' and 'NativeElements' are not identical.

After trying a bunch of things I got my storybook ui library successfully running both its storybook via start-storybook -p 6006 and successfully building via vue-tsc --noEmit && vite build with the following configs:

package.json

"dependencies": {
    "@vueuse/core": "^6.5.3",
    "animejs": "^3.2.1",
    "vue": "^3.2.24"
  },
  "devDependencies": {
    "@types/animejs": "^3",
    
    "typescript": "^4.4.3",
    "vue-tsc": "^0.29.8",

    "vite": "2.7.0",
    "@vitejs/plugin-vue": "^1.10.2",
    "storybook-builder-vite": "^0.1.11",
    
    "@storybook/addon-a11y": "^6.4.0",
    "@storybook/addon-essentials": "^6.4.0",
    "@storybook/vue3": "^6.4.0",

    "@mdx-js/preact": "^1.6.22",
    "@mdx-js/vue": "^1.6.22"
  }

.storybook/main.js

module.exports = {
  framework: '@storybook/vue3',
  features : { storyStoreV7: true },
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-a11y",
    "@storybook/addon-essentials"
  ],
  core: {
    builder: "storybook-builder-vite"
  },
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"],
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

However, when I go to build it as part of my larger monorepo scripts it still throws type errors on missing React:

../node_modules/@types/react-syntax-highlighter/index.d.ts:2625:28 - error TS7016: Could not find a declaration file for module 'react'. '/Users/me/my-monorepo-project/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

I do worry resolving this will just bring back the vue dom and react types conflicting type errors :/

~~Still investigating~~ I first updated this comment once I got the original IntrinsicElements errors to go away. I don't know what specifically caused/fixed those initial type errors (probably a set of bad package versions) but I figured I could share the config that is working (unfolds above).

Identified the cause of this last React types error: one of my package typescript libraries had a different tsconfig, so that was picking up React through monorepo (still a bad dumb bug); adding types: [] to the tsconfig.json in that package folder resolved the error.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[jakehamilton]

Bumping to prevent staling.

As far as I know this is still an issue and causing trouble in my Preact codebase. Working around it by deleting the node module myself is tedious and a bit hacky. Is there a way for Storybook to address this so non-react projects don't pull in react types?

[jadams2305]

Still an issue here. with Vue3 + storybook + PNPM.

Erros like:

../../../node_modules/.pnpm/@[email protected][email protected]/node_modules/@emotion/core/types/index.d.ts:17:8 - error TS7016: Could not find a declaration file for module 'react'. '/workspace/node_modules/.pnpm/[email protected]/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

17 } from 'react'
          ~~~~~~~

[UkonnRa]

Still the issue here:

When vue-tsc --emitDeclarationOnly:

src/Scaffold.vue:6:10 - error TS2322: Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Did you mean 'className'?

Scaffold.vue:

<template>
  <v-app :theme="theme" class="scaffold">
    <v-btn @click="toggleTheme">Toggle Theme: Current {{ theme }}</v-btn>
    <Hello></Hello>
    <World></World>
    <div class="chip-group"> <-- The problem is here
      <v-chip v-for="c in colors" :key="c" class="chip" :color="c">{{
        c
      }}</v-chip>
    </div>
  </v-app>
</template>

[BracketJohn]

Would be awesome to land & resolve this -> it's really a big drawback to not be able to use typescript checking for storybook stories.

Thanks @iamandrewluca for opening the PR (:

[cmcnicholas]

I've just got v7 alpha 54 working and this is still an issue, it creates a bad developer experience as it's not immediately apparent why this broke my monorepo setup.

[xignp]

I have same issue when using vite+vue3+typescript+storybook+Volar. In my case, One solution was to uninstall @storybook/addon-interactions

but I need to other solutions.

npm uninstall @storybook/addon-interactions

[hyrumwhite]

Dealing with this myself. Seems related to the @mdx-js/rollup package. Deleting the @types/react folders fixes it, but that's a less than desirable fix.

[IanVS]

Would someone be able to help us out by creating a reproduction or set of steps we can follow to reproduce this issue in the latest 7.0 beta versions? We've made some changes recently, which I think might have fixed this.

[K3TH3R]

Would someone be able to help us out by creating a reproduction or set of steps we can follow to reproduce this issue in the latest 7.0 beta versions? We've made some changes recently, which I think might have fixed this.

@IanVS I've just been upgrading our Storybook to 7-beta.25 and I'm still seeing this with my Vue/Typescript repo. Can't do a repro quite yet, can try next week, but if I run a yarn why @types/react I'm seeing this:

yarn why @types/react
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "@types/react"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@types/[email protected]"
info Reasons this module exists
   - "@storybook#addon-essentials#@storybook#addon-docs#@mdx-js#react" depends on it
   - Hoisted from "@storybook#addon-essentials#@storybook#addon-docs#@mdx-js#react#@types#react"
info Disk size without dependencies: "1.34MB"
info Disk size with unique dependencies: "3.23MB"
info Disk size with transitive dependencies: "3.23MB"
info Number of shared dependencies: 3
✨  Done in 3.25s.

@tft7000's comment on the #592 Volar Thread got me sorted by adding a skip dependency resolution to my package.json:

"resolutions": {
    "@types/react": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.1.1.tgz"
}

There's several other solutions in there as well. But this resolutions one will only work if you don't actually need React types supported in your repo.

[l10rdev]

Did some one already update to storybook 7 is there still a problem?

[K3TH3R]

Did some one already update to storybook 7 is there still a problem?

Yes, see my post directly above yours. I'm on Storybook 7.0.0-beta.25 and I needed to set a resolution for @types/react to the skip-dependency package to get past this issue.

[chakAs3]

@l10rdev yes this definitely gonna work for you

"resolutions": {
    "@types/react": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.0.2.tgz"
  }

just make sure to remove node_module, run again yarn and restart your VS Code.

[l10rdev]

@chakAs3 Unfortunately we use npm. We now added a postinstall hock to remove this package.

[shilman]

Does anybody you a have a reproduction repo you can share on the latest 7.0 beta? If not, can you create one? See how to create a repro. Thank you! 🙏

[K3TH3R]

Does anybody you a have a reproduction repo you can share on the latest 7.0 beta? If not, can you create one? See how to create a repro. Thank you! 🙏

@shilman I actually just setup a sample repo for a separate issue I was seeing in @storybookjs/testing-vue3. I just double-checked and I'm still seeing the issue with class in this repo. All dependencies have been updated to the most recent versions as of today.

$ yarn why @types/react
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "@types/react"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@types/[email protected]"
info Reasons this module exists
   - "@storybook#addon-essentials#@storybook#addon-docs#@mdx-js#react" depends on it
   - Hoisted from "@storybook#addon-essentials#@storybook#addon-docs#@mdx-js#react#@types#react"
info Disk size without dependencies: "1.35MB"
info Disk size with unique dependencies: "3.25MB"
info Disk size with transitive dependencies: "3.25MB"
info Number of shared dependencies: 3
✨  Done in 0.62s.

If I add the skip-dependency to the resolutions in this repo's package.json it also fixes the problem (after wiping/reinstalling node_modules and restarting VSCode).

[iamandrewluca]

The issue with TS error on class attribute was discussed in this thread a lot. That is because Vue+TS projects have in tsconfig.json the property jsx set to preserve, which makes TypeScript JSX default to @types/react. When you don't have @types/react in node_modules, Volar will default to @vue/runtime-dom

Screenshots

This is the temporary solution I suggested that will make TS JSX to load correct @vue/runtime-dom

[IanVS]

Correct me if I'm wrong, but the issue seems to be that one of our dependencies, @mdx-js/react includes @types/react in their dependencies (https://github.com/mdx-js/mdx/blob/f4d78be5c015e8fab48589efae9507d0304e5e94/packages/react/package.json#L45), and volar (and maybe other vue projects?) will pick up that types file if it is in your node_modules. So, it seems like the only thing that can be done is to submit a PR to @mdx-js/react to move those types to a devDependency. Would someone here like to do that? I think it would be best coming from someone who is directly impacted, maybe @iamandrewluca since you seem pretty knowledgable about what's happening here?

[iamandrewluca]

Opened a discussion, let's see with what can they help us. https://github.com/mdx-js/mdx/discussions/2238

[IanVS]

It seems the maintainers of the MDX package so far are not receptive to making types optional. I do not think there is anything that Storybook can do to address this, so I'm closing this issue. For those of you here who feel strongly about this issue, please discuss in the thread that @iamandrewluca started: https://github.com/orgs/mdx-js/discussions/2238.

[iamandrewluca]

@IanVS after mdx folks suggested fixing this at the TS level, I think I may found the solution. But it is like a floating bug, sometimes exists sometimes not.