Storybook: Why is react stated as peerDependency when using @storybook/vue?

[dietergeerts]

I'm using the latest beta version right now (37), and use rush + pnpm for our mono-repo. I can't find in the docs what the reason is that react is stated as peerDependency for @storybook/vue, and some plugins, while react is only used internally by Storybook. An explanation would be great, as right now, I change them to normal dependency in pnpmfile, and all still works.

As a side-note: I know it's not always easy specifying dependencies, and peerDependencies are somewhat over-used out there, while they should only be used when a package really is a plugin/addon, or is suppose to work together with the actual source code and it's framework.

[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!

[shilman]

I believe we're considering making it a direct dependency: https://github.com/storybookjs/storybook/pull/11628

[marmax]

While using Vue.js (CLI) or Nuxt.js, I don't want to get bothered by any dependency which doesn't fit to my (selected) stack...

warning " > @storybook/[email protected]" has unmet peer dependency "react@^16.8.0".
warning " > @storybook/[email protected]" has unmet peer dependency "react-dom@*".
warning " > @storybook/[email protected]" has unmet peer dependency "react-is@^16.8.0".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "react-dom@*".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "react@*".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "react-dom@*".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "babel-loader@^8.0.0".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "react@>=16.3.0".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "react-dom@*".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "react-is@^16.8.0".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "react@*".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "react-dom@*".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "react@*".
warning "@storybook/addon-essentials > @storybook/[email protected]" has unmet peer dependency "react-dom@*".
warning "@storybook/addon-essentials > @storybook/addon-docs > @mdx-js/[email protected]" has unmet peer dependency "react@^16.13.1".
warning "@storybook/addon-essentials > @storybook/addon-docs > @storybook/[email protected]" has unmet peer dependency "react@*".
warning "@storybook/addon-essentials > @storybook/addon-docs > @storybook/[email protected]" has unmet peer dependency "react-dom@*".
warning "@storybook/addon-essentials > @storybook/addon-docs > [email protected]" has unmet peer dependency "react@^0.14.8 || ^15.0.1 || ^16.0.0".
warning "@storybook/addon-essentials > @storybook/addon-docs > [email protected]" has unmet peer dependency "react-dom@^0.14.8 || ^15.0.1 || ^16.0.0".

[shilman]

@marmax Are you only concerned about the warnings? Or are you concerned by the fact that Storybook depends on React?

[marmax]

@shilman To be honest, I was not aware (mea culpa) that Storybook depends on React.js - I am using Storybook with CRA so I was not thinking deeply about this.

But as soon as I've tried Storybook with Vue/Nuxt I was surprised by all the peer dependencies which just looked weird to me ...

Now I do understand #11628 ;-)

Note: Anyway, until #11628 gets resolved, I would expect those peer dependencies to be installed by the sb init script, but currently it only adds (to a fresh vue-cli based project):

+    "@babel/core": "^7.11.1",
+    "@storybook/addon-actions": "^6.0.12",
+    "@storybook/addon-essentials": "^6.0.12",
+    "@storybook/addon-links": "^6.0.12",
+    "@storybook/vue": "^6.0.12",
+    "babel-loader": "^8.1.0",
+    "react-is": "^16.13.1",

I can see e.g. react-is being added, but react and react-dom are not. And there is no mention of it on https://storybook.js.org/docs/vue/get-started/install.

Btw., I find @storybook/addon-actions to be redundant here as it's already transitively included by @storybook/addon-essentials

[shilman]

Btw., I find @storybook/addon-actions to be redundant here as it's already transitively included by @storybook/addon-essentials

Yep ... @tooppaaa was leaving addon-actions as a dependency intentional?

[tooppaaa]

Yes, however this can be updated.

Idea was to move all CLI's to a single script, all frameworks relied on the same set of addons, then we added essentials and finally starting to migrate popular frameworks using this superset.

There are still some frameworks that are using addon-actions _the old way_. Instead of excluding this addon from migrated frameworks, we leaved it as is.

Work must go on 🧑‍🎤

[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!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!