React 18 createRoot supports

[sivaraj-v]

Feature looking for React 18 createRoot in storybook

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

I'm getting warning as follow,

Currently I'm using following version,

"@storybook/addon-a11y": "6.4.22",
"@storybook/addon-actions": "6.4.22",
 "@storybook/addon-jest": "6.4.22",
"@storybook/addon-viewport": "6.4.22",
"@storybook/builder-webpack5": "6.4.22",
"@storybook/manager-webpack5": "6.4.22",
 "@storybook/react": "6.4.22",
 

[Stunext]

You need to wait for version ^6.5 or use some of the alpha or beta versions. Keep in mind that as an "alpha/beta" version not all bugs are fixed.

[shilman]

Try upgrading to the latest 6.5 prerelease:

npx sb@next upgrade --prerelease

That will fix user code. Storybook's own UI is written in React 17, so it may also generate a warning. But that's safe to ignore for now. We'll rewrite the UI in React 18 for SB 7.0 which is coming next.

[sivaraj-v]

Thanks @shilman and @Stunext

[latata]

It looks like in the latest version of storybook (6.5.9) still uses old ReactDOM.render method instead of createRoot. Are there plans to change it?

[shilman]

@latata do you have a reproduction of this? it should use the new root API if you're using react18 in your project. More info here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react18-new-root-api

[bstaruk]

@shilman Here is a repo which has just 2 commits (CRA init, then storybook init), which reproduces the issue:

https://github.com/bstaruk/storybook-18045

edit: Using node 16.15.0

[Semigradsky]

storybook/lib/ui/src/index.tsx

Line 101 in b4bf826

ReactDOM.render(<Root key="root" provider={provider} />, domNode);

[niug]

I have the same problem. Do you know how to solve it, even if it is a temporary solution?

[Semigradsky]

Temporary solution - just ignore it. It is warning in Storybook UI, not in your components.

[niug]

Hi @Semigradsky, but my components don't loading correctly, are always in an inifinite loading loop:

[Semigradsky]

@niug I don't think that this is related to warning. Latest stable storybook (6.5.9) works great with React 18 for me.

[niug]

ok @Semigradsky, I'm using this version, here it's my package.json:

Some idea why don't load the component page? Thanks.

[Semigradsky]

@niug I have no idea. Create a new issue with a link to a reproducible demo

[uh92]

I'm not sure correctness of result but twice result the same

[uh92]

I saw comment from @shilman how to fix but doesn't work

[Semigradsky]

@vladgorbachev why did you write it here? It is totally different issue, open your own.

Also, you use 7.x version - it has break changes, read the migration guide at first (MIGRATION.md).

[shilman]

Closing this as fixed by #17215

This is available in 6.5+