Add support for React 18

Is your feature request related to a problem? Please describe

Only so far as upgrading to React 18 is concerned 😃

Specifically, when I try to update my devDependencies, @storybook/addon-controls throws an error, because it’s peerDependencies is set to only React 16 and 17.

Doublechecked in the package.json https://github.com/storybookjs/storybook/blob/next/addons/controls/package.json#L61-L64

There’s probably already some awareness of this and/or a fix in flight, but just in case I thought I’d mention it.

Describe the solution you’d like

Ideally I think it’s as simple as updating the peerDependencies throughout Storybook’s packages, but I’m sure there’s some additional work in the ReactDOM.render > ReactDOM.createRoot transition that would affect Storybook’s rendering cycle.

Describe alternatives you’ve considered

None as yet

Are you able to assist to bring the feature to reality?

I’m happy to make a PR to update the peerDeps, if it was deeper than that I’d be lost 😃

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.54 containing PR #17853 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

This is a temporary fix. Full fix still coming in https://github.com/storybookjs/storybook/pull/17215

[valentinpalkovic]

@alberto-f Thank you for your concerns.

I try to do my best to summarize everything important to the React 18 support.

1. Storybook will render your components with the new root API as soon as React 18 is installed. You can opt-out from this if you want. Then the legacy root API is used to mount your components
2. Storybook itself, the Storybook manager, is written in React, too. And it relies on the React version, which is installed in your project. It doesn’t provide its very own React version. Therefore, if React 18 is used in your project, the Storybook Manager uses it as well, but will still use the legacy root API to mount itself to the DOM. This mounting has nothing to do with how your components are mounted to the DOM.

Next steps

As discussed with the maintainers, we didn’t want to use the new Root API to mount Storybook to the DOM because this would require profound testing of Storybook and all of its plugins. I am sure this will be done in one of the next iterations. Maybe @shilman could give some feedback in this regard.

Questions

If I see the error once, Are my components using react v18 or react v17 ?

Which React version your components use relies on your installed React version. If you are installing React in version 18, then version 18 is used. The difference is only whether the concurrent features are activated. And this depends of whether the components are mounted with the new Root API or the legacy one. As already mentioned, if React 18 is in use and you haven’t opt-out from the new Root API, the Root API is used, and all concurrent features are “activated”.

Is there any ticket to get information about when Storybook will fully support react v18 as this one has been closed?

Storybook supports mounting your components in React 18 with the new Root API. If still, some errors occur, please open a new ticket with a reproducible example. Often, the issue was related to an existing yarn.lock file, which didn’t allow to resolve dependencies correctly. In some other cases, some transitive dependencies were not ready for React 18. Ideally, the support should be fine (except for the console error message from React, which tells you, that the Storybook Manager still uses the old API)

This thread provides hacks to move forward and use react 18, but it is soooo lengthy that it is difficult to follow.

Hacks shouldn’t be needed at all. I know that npm users might have the legacy-peer-deps issue because some transitive dependencies haven’t defined React 18 as a valid React version. That’s indeed awkward. Please create a new ticket if you still have any issues (except for the console error from React). I am sure it will be taken care of as soon as possible.