Management of `react` and `react-dom` dependencies

What is this?

I want to use this issue to follow and discuss:

• React as regular/peerDep issue
• unmet peer dependency warnings when running installing deps

Context

Storybook packages are split into 3 “types”:

• lib: these packages contain framework-agnostic code that power Storybook, for instance, webpack config for both server and UI part, React components of Storybook UI, code enabling data exchange between packages, etc. Some of these packages depend on react and react-dom
• app: these are the app-specific packages, there is one for each framework like React, Angular, Vue, Preact, etc. They contain all the tooling to bridge/integrate user’s components in Storybook (via story files). They don’t use react directly (expect @storybook/react of course) but use multiple lib packages
• addon: these are extra packages that can be added to enhance Storybook features, for instance: set a11y filters, define a shared background, etc. They are optional, some of them are “official” (developed by the Storybook team) and others come from the community. Some of them include both a UI part and a “server”/processing part. They use lib packages, and many of them are also using react directly to build UI of new toolbar or pane.

Current situation

For Storybook to properly work we need to be sure all libs and addons are using the same version of react and react-dom as they end up in a single React app. For now:

• libs using React are declaring both react and react-dom as peerDependencies
• addons have regular dependencies on some lib packages and declare both react and react-dom as peerDependencies:
  • because they use React directly
  • OR to satisfy peerDependencies of lib packages (transitive peer deps)
• apps have both react and react-dom as regular dependencies, except for @storybook/react in which they are peerDependencies

To ensure we are using a single version of React, there is a Webpack alias on react so all Storybook packages are requiring/importing the same React package.

Current issue

As a Storybook user in an Angular project:

• I bootstrap a new Angular app and add Storybook
• I have @storybook/angular as devDep in my project (added via sb init for instance)
• I run yarn install then yarn storybook
• Everything is fine, there are no yarn warning nor Storybook error
• I add an addon (for instance @storybook/addon-backgrounds)
• When I run yarn install I get some missing peer dep warnings as the addon have react and react-dom as peer dep
• However, yarn storybook is working just fine because @storybook/angular provided react and react-dom

With 3+ addons, each yarn install results in a flood of warnings leading to a poor UX.

What we tried

1. Before Storybook 6.0, react and react-dom were peer dep of all apps, so it was to the Storybook user to install them directly in their project.

–> Cons:

• Users of non react framework were unhappy because they had to install and update react themselves
• Some issues were reported by Vue users about TypeScript global types for JSX (conflicting with react ones)

1. In 6.0 we tried to put react and react-dom as regular deps in all the packages using them directly and counting on the webpack alias to make everything build with a single version of react. When React 17 was released it was a real fail, we had to release a version where we soften the version range of react deps, hoping yarn and npm will be able to dedupe react versions and end up with either 16.x or 17. :crossed-finger:

2. In 6.1, the current version (see #Current situation), we tried to work around the warnings by using peerDependenciesMeta and setting react + react-dom as optional in all addons. We were hoping Yarn will not display any warnings but:

• There are still a lot of warnings because even if react and react-dom are optional for addons, they are not for the libs required by the addons
• Optional peer dep is tricking Yarn 1 classic but not Yarn 2

[CyberStrike]

Helpfully contributing and not noise can split if requested, having issues with peer dependencies this was my solution.

Issue

Storybook Vue 6.1.x upgrade 'react-dom/package.json'

Describe the bug

Upgrading from 6.0.26 to 6.1.11 results in a build failure.

WARN Failed to load preset: ".../@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'react-dom/package.json'

Solution

I was able to solve this by removing all the storybook packages.

    @storybook/addon-actions
    @storybook/addon-docs
    @storybook/addon-essentials
    @storybook/addon-knobs
    @storybook/addon-viewport
    @storybook/vue

and re-installing

   @storybook/vue
   @storybook/addon-essentials

By doing this it installs the peer dependencies and Storybook compiles properly.

[gaetanmaisse]

• Runtime issue should be fixed by #13195. TLDR: Use require.resolve to resolve react and react-dom from @storybook/core, as they are declared as peer dependencies this will get them from the parent which is one of the apps, and in the case of @storybook/react it will get them from the parent which is usually the user’s project.

• About unmet peer dependency warnings when running installing deps with some addons, the webpack alias will properly work after ⬆️ will be merged so we have the following options to get rid of them:

  • 1️⃣ Remove react and react-dom from the dependencies of addons
  • 2️⃣ Move react and react-dom to a regular dependency again, they’ll be aliased to the correct one now. And we can set the version to * (i.e. "react": "*") to highlight the fact that React’s version set here isn’t significant.

@merceyz and I prefer to go with 2️⃣