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

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

Closed
voskresla opened this issue Sep 17, 2020 · 39 comments
Closed

Comments

@voskresla
Copy link

voskresla commented Sep 17, 2020

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

ProTip commented Sep 29, 2020

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

@stale
Copy link

stale bot commented Dec 26, 2020

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!

@stale stale bot added the inactive label Dec 26, 2020
@YuJianghao
Copy link

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"

@stale stale bot removed the inactive label Sep 29, 2021
@jakehamilton
Copy link

jakehamilton commented Oct 19, 2021

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

image

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

mmmbacon commented Oct 28, 2021

Same issue here. Builds are breaking because of this.
image

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

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

@SachaAvazashvili
Copy link

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

tft7000 commented Nov 19, 2021

You might want to check out vuejs/language-tools#592 for additional workarounds.

XavierChevalier pushed a commit to XavierChevalier/jam that referenced this issue Nov 26, 2021
Refs: //github.com/storybookjs/storybook/pull/16629,//github.com/storybookjs/storybook/pull/16630,//github.com/vuejs/core/issues/1033,//github.com/storybookjs/storybook/issues/12505,//github.com/XavierChevalier/ewokify-app/runs/4326759026?check_suite_focus=true
@RegisFrey
Copy link

RegisFrey commented Dec 11, 2021

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

stale bot commented Jan 9, 2022

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!

@stale stale bot added the inactive label Jan 9, 2022
@jakehamilton
Copy link

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?

@stale stale bot removed the inactive label Jan 10, 2022
@jadams2305
Copy link

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'
          ~~~~~~~

HosokawaR added a commit to twin-te/twinte-front that referenced this issue Mar 21, 2022
# @types/react との競合について
storybookjs/storybook#12505vuejs/language-tools#592 に言及されている通り
@types/react と競合し型エラーが発生する。
対策として @types/react の削除、tsconfig からの stories.ts の除外が考えられるが今回は前者を選択した
理由は @types/react を使用しないことが明確であり、stories.ts にはしっかり tsconfig を適応していからである。
@UkonnRa
Copy link

UkonnRa commented Mar 26, 2022

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

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

@shilman shilman removed the P3 label Oct 18, 2022
@cmcnicholas
Copy link

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.

@K3TH3R
Copy link

K3TH3R commented Jan 19, 2023

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.

@shilman shilman moved this to Nice to have in Core Team Projects Jan 20, 2023
@shilman shilman moved this from Nice to have to Required for RC in Core Team Projects Jan 20, 2023
@chakAs3
Copy link
Contributor

chakAs3 commented Jan 23, 2023

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

l10rdev commented Jan 23, 2023

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

@shilman
Copy link
Member

shilman commented Jan 23, 2023

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

K3TH3R commented Jan 24, 2023

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.

Screenshot 2023-01-24 at 3 24 15 pm

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

iamandrewluca commented Jan 24, 2023

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

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

image

@IanVS
Copy link
Member

IanVS commented Jan 25, 2023

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

iamandrewluca commented Jan 26, 2023

Opened a discussion, let's see with what can they help us.
mdx-js/mdx#2238

@IanVS
Copy link
Member

IanVS commented Jan 26, 2023

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.

@IanVS IanVS closed this as not planned Won't fix, can't repro, duplicate, stale Jan 26, 2023
@iamandrewluca
Copy link
Contributor

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

@IanVS
Copy link
Member

IanVS commented Jan 26, 2023

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.

@iamandrewluca
Copy link
Contributor

iamandrewluca commented Jan 26, 2023

Check this out. Just adding "types": ["@vue/runtime-dom"] fixes the issue.
And from my investigation of a nuxt3 project, there are no traces of Vue types in tsconfig

I suppose mdx may move them to peer deps, but just for the sake of making it right.
ps: that won't fix this problem, peer deps will also be installed (starting with npm@7)

image

image

@IanVS
Copy link
Member

IanVS commented Jan 26, 2023

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

@IanVS
Copy link
Member

IanVS commented Jan 26, 2023

ps: that won't fix this problem, peer deps will also be installed (starting with npm@7)

Not if they're specified as optional in peerDependenciesMeta.

@iamandrewluca
Copy link
Contributor

iamandrewluca commented Jan 26, 2023

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

🤔

@iamandrewluca
Copy link
Contributor

Not if they're specified as optional in peerDependenciesMeta.

Tested right now locally, still installs them

image

@iamandrewluca
Copy link
Contributor

iamandrewluca commented Jan 26, 2023

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

@IanVS
Copy link
Member

IanVS commented Jan 26, 2023

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 npm/rfcs#221 (comment) and npm/cli#2615 (comment).

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.

@iamandrewluca
Copy link
Contributor

iamandrewluca commented Jan 26, 2023

About NPM. Yes, I have v8, and v9 fixes that.
But it seems the problem is not the @types/react existence, but when something imports it.

I have some more insight, that sends me to the @apollo/client library.

I have Fresh Nuxt3 with Storybook. Everything works fine.
I want to add Apollo. Adding Apollo Nuxt module.
In Nuxt3 the module types are automatically augmented.
And after investigation, it seems that deep down in some files there is a react import in a *.ts file in @apollo/client that creates this issue.

So now I'm thinking that this is not a Storybook problem at all. 🤔

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

Successfully merging a pull request may close this issue.