-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
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
Comments
Seeing the same in |
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! |
Is this the same problem? Seems error outputs:
My versions:
|
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:
|
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
|
You might want to check out vuejs/language-tools#592 for additional workarounds. |
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
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:
After trying a bunch of things I got my storybook ui library successfully running both its storybook via package.json
.storybook/main.js
tsconfig.json
However, when I go to build it as part of my larger monorepo scripts it still throws type errors on missing React:
I do worry resolving this will just bring back the vue dom and react types conflicting type errors :/
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 |
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! |
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? |
Still an issue here. with Vue3 + storybook + PNPM. Erros like:
|
# @types/react との競合について storybookjs/storybook#12505 や vuejs/language-tools#592 に言及されている通り @types/react と競合し型エラーが発生する。 対策として @types/react の削除、tsconfig からの stories.ts の除外が考えられるが今回は前者を選択した 理由は @types/react を使用しないことが明確であり、stories.ts にはしっかり tsconfig を適応していからである。
Still the issue here: When
Scaffold.vue:
|
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'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. |
Yes, see my post directly above yours. I'm on Storybook 7.0.0-beta.25 and I needed to set a resolution for |
@l10rdev
just make sure to remove node_module, run again |
@chakAs3 |
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 $ 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 |
The issue with TS error on This is the temporary solution I suggested that will make TS JSX to load correct |
Correct me if I'm wrong, but the issue seems to be that one of our dependencies, |
Opened a discussion, let's see with what can they help us. |
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 after mdx folks suggested fixing this at the TS level, I think I may found the solution. |
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. |
Check this out. Just adding I suppose mdx may move them to peer deps, but just for the sake of making it right. |
Note that if you specify |
Not if they're specified as optional in |
So this issue should be fixed by Vue frameworks/boilerplates authors, to make sure they include those types.
I suppose this is ok 🤔
for example when you import from 🤔 |
I want to give up )) I cannot reproduce the issue in my repo anymore 🤣 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 |
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 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. |
About NPM. Yes, I have v8, and v9 fixes that. I have some more insight, that sends me to the I have Fresh Nuxt3 with Storybook. Everything works fine. So now I'm thinking that this is not a Storybook problem at all. 🤔 |
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:
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
intsconfig
to solve this.The text was updated successfully, but these errors were encountered: