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

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"

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

Erros like:

../../../node_modules/.pnpm/@emotion+core@10.3.1_react@16.14.0/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/react@16.14.0/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'
          ~~~~~~~

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

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

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",
....

So this issue should be fixed by Vue frameworks/boilerplates authors, to make sure they include those types.

Note that if you specify types, you will lose all other definitely-typed types as well. Be sure to read typescriptlang.org/tsconfig#types to understand what it does.

I suppose this is ok 🤔

types is for global augumented types,

for example when you import from react, it will automatically infer types from @types/react

🤔

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 (:

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:

"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"
  }

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"
  },
}

{
  "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.

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

There are a lot of people subscribed on this issue, and I don’t want to continue a back and forth about npm behavior here (happy to dig in more on discord.gg/storybook, though!). Maybe you have an older npm or something, as of recent versions, it should be respecting optional: true. See https://github.com/npm/rfcs/issues/221#issuecomment-695127530 and https://github.com/npm/cli/issues/2615#issuecomment-784509497.

Edit: The more I read the less of this I am certain. It certainly seems like a bug if npm is automatically installing optional peer dependencies, and hopefully other package managers like yarn and pnpm don’t also do this. So regardless, I think it’s still the best approach for the mdx package to take.

I want to give up )) I cannot reproduce the issue in my repo anymore 🤣 Also, it seems that types also won’t help. If TypeScript will find @types/react in the import tree it will still show the error.

So this can be a floating bug, depending on what order TS will start analysing the files 🤔

I just created a file that is not imported anywhere, and inside, I’m importing react. The error appears.

At least we now have more insight about this issue

Not if they’re specified as optional in peerDependenciesMeta.

Tested right now locally, still installs them

Personally I think mdx should use an optional peer dependency. That is the most “correct” way to handle the situation, but they seem to be resisting that approach. Anyone using typescript and react will have react types installed, and those using mdx without typescript should not have the types forced into their node_modules. But again, it’s unfortunately out of our hands here in Storybook.

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?

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

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?

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",