Add support for React 18

[GrossDesignCo]

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

[souppower]

@GrossDesignCo

This pr might be related.
#17215

It doesn't look like it's as simple as bumping the peerDependencies. 🤔

[bcheidemann]

It would be great to get some indication from the storybook team about when storybook will support React 18. Many projects will be unable to upgrade until storybook has support.

[cameron-martin]

It should be as simple as bumping the peerDependencies if you don't want storybook to use the new createRoot APIs. The old ReactDOM.render API should behave exactly the same AFAIK.

[shilman]

I'm hoping to get #17215 merged and released early next week. If that doesn't happen for some reason, I'll look into a simpler PR to start to bump the peer dependencies.

[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 #17215

[jcerri]

@shilman I couldn't verify if this fixes the issue I still got but it may be needed to do the same for react-test-renderer dep.

[shilman]

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

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[brendonco]

Getting these warnings after upgrade @shilman

WARN Found 7 outdated packages (relative to '@storybook/addon-actions@6.5.0-alpha.58')
WARN Please make sure your packages are updated to ensure a consistent experience.
WARN - @storybook/node-logger@6.4.20
WARN - @storybook/addon-postcss@2.0.0
WARN - @storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
WARN - @storybook/babel-plugin-require-context-hook@1.0.1
WARN - @storybook/mdx1-csf@0.0.1-canary.1.867dcd5.0
WARN - @storybook/mdx1-csf@0.0.1-canary.1.867dcd5.0
WARN - @storybook/mdx2-csf@0.0.1-canary.1.838a6ca.0

[shilman]

Thanks @brendonco -- safe to ignore and I'll fix in the next release

[JohnCido]

I'm getting this after upgrading to 6.5.0-alpha.59:

The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".

Logs attached:
localhost-1649323648198.log
localhost-1649323685702.log

[shilman]

@valentinpalkovic any ideas? ☝️

[valentinpalkovic]

@JohnCido Which version have you used before? And can you tell me, which addons are in use?

@shilman I assume this warning is thrown by emotion und should be unrelated of the react 18 support. I rather think, that in the meantime emotion was potentially updated, too.

Related issues:

• Cannot turn off "potentially unsafe when doing server-side rendering" noise emotion-js/emotion#1105

Worth to mention: The message gets already ignored in jest tests

storybook/scripts/jest.init.js

Line 36 in 3f3e650

error => error.message.includes('":first-child" is potentially unsafe'),

for quite some time.

We could add the required ignoreSSrFlag to the remaining usages of first-child to avoid the warning. Like it is done here:

storybook/lib/components/src/blocks/ArgsTable/ArgsTable.tsx

Line 114 in 783e5aa

[`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {

Indeed, an adjustment would only be necessary in lib/components/src/blocks/Source.tsx:L55.

I will open a PR

[JohnCido]

@JohnCido Which version have you used before? And can you tell me, which addons are in use?

@shilman I assume this warning is thrown by emotion und should be unrelated of the react 18 support. I rather think, that in the meantime emotion was potentially updated, too.

Related issues:

• Cannot turn off "potentially unsafe when doing server-side rendering" noise emotion-js/emotion#1105

Worth to mention: The message gets already ignored in jest tests

storybook/scripts/jest.init.js

Line 36 in 3f3e650

error => error.message.includes('":first-child" is potentially unsafe'),

for quite some time.
We could the required ignoreSSrFlag to the remaining usages of first-child to avoid the warning. Like it is done here:

storybook/lib/components/src/blocks/ArgsTable/ArgsTable.tsx

Line 114 in 783e5aa

[`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {

Indeed, an adjustment would only be necessary in lib/components/src/blocks/Source.tsx:L55.

I will open a PR

@valentinpalkovic
I was using alpha 57 before this upgrade. And these are the @storybook/ packages I've been using:

"@storybook/addon-actions": "^6.5.0-alpha.59",
"@storybook/addon-essentials": "^6.5.0-alpha.59",
"@storybook/addon-interactions": "^6.5.0-alpha.59",
"@storybook/addon-links": "^6.5.0-alpha.59",
"@storybook/api": "^6.5.0-alpha.59",
"@storybook/builder-webpack5": "^6.5.0-alpha.59",
"@storybook/manager-webpack5": "^6.5.0-alpha.59",
"@storybook/react": "^6.5.0-alpha.59",

[Hypnosphi]

There's still a "Warning: ReactDOM.render is no longer supported in React 18" warning in 6.5.0-alpha.59 because manager still uses ReactDOM.render: https://github.com/storybookjs/storybook/blob/next/lib/ui/src/index.tsx#L91

[valentinpalkovic]

@Hypnosphi Thank you for the hint. This issue is already known (discussed with @shilman) and we decided to take care of the new Root API for the Storybook UI in an upcoming iteration.

[alberto-f]

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot -> if you don't see this error twice, then everything is fine. Storybooks Manager isn't rewritten so far and will use the legacy root API to mount itself to the DOM. You can safely ignore this message.

link: #17831 (comment)

Would it be possible to get some more information about the sentence if you don't see this error twice, then everything is fine ? If I see the error once, Are my components using react v18 or react v17 ?

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

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

If storybook does not support yet react v18, guys, people, IT IS ALL GOOD. You guys are doing an amazing job and the fact that many people are asking in this thread is because we love storybook and want to keep it in our projects. But a more official answer would help so that everyone does not need to read this thread and still be unsure if storybook does support it without warnings or hacks such as using overrides in package.json or by using --legacy-peer-deps (based on this one https://stackoverflow.com/a/66620869/1578841 it does not seem to me really recommended to follow as it mutes valid checks and warnings)

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

[alberto-f]

@valentinpalkovic Thank you so much for taking the time to clarify all the questions.

It is really clear the status of storybook supporting React v18 and how to proceed if something is not working as expected.

[stephyswe]

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

Take your time. Only thing that is the issue is this little warning message. When we find a solid way to get rid of that message (aka upgrade something). I think its better to wait until that fix arrives. :)

[NathanVss]

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

Thank you for this precision, it prevented us to waste time in trying to find a solution to this error message. The main point to keep in mind for us is that Storybook renders of components with React 18 ( if installed ), so when we interact with them we are "really" testing them with React 18 and its concurrent features.

Thank you for your amazing work :)

[vislogurov]

@atomless Yo! DId you solve your problem with "ui with a spinner, no stories ever render"? I have the same problem too(

[edgar0011]

This worked for me:

preview.js

import React from 'react'
window.React = React