-
-
Notifications
You must be signed in to change notification settings - Fork 9.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React: Add support for react18's new root API #17215
React: Add support for react18's new root API #17215
Conversation
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 40747e0. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this branch ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
Definitely needing something like this to start upgrading to React 18 for Suspense on internal apps. Any timeline on when this is mergable? |
Hoping to look in the next week. Thanks for your patience! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewed with @chantastic since my React18 knowledge is sorely lacking. We are big fans of this work, but have some concerns mostly about the complexity of the CallbackWrapper
and also the potential for a memory leak with the nodes
map. In addition some other minor nits.
Thanks so much for your patience so far and for bearing with us as we get this to a mergeable state together. Would love to hear your feedback on any of these points, since we are still learning this new feature.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
An additional question after reviewing with @kylegach @ndelangen @yannbf 😄
The new React Root Api (ReactDOM.createRoot) allows to use the newest concurrent features of React 18. A feature flag was added to enable/disable the new Root API via storybook options.
Co-authored-by: Michael Shilman <shilman@users.noreply.github.com>
Co-authored-by: Michael Shilman <shilman@users.noreply.github.com>
2cd13d2
to
5e3f711
Compare
Hey @valentinpalkovic this is such a great contribution! I hope you don't mind – I'll update this branch and fix the merge conflicts, and attempt to add an E2E test for the flags you added. |
I have a hacky POC working for the vite-builder. I'll put up a PR for it later this evening, but at least it looks like it's a solvable problem. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@valentinpalkovic @ndelangen tremendous job on this!! 🎉
Also, this breaks the vite builder, but @IanVS is on top of this and we expect to get it fixed soon |
An [exciting PR](storybookjs/storybook#17215) has been merged and released in `6.5.0-alpha.58 ` that adds storybook support for React 18. However, it currently breaks in the vite-builder test because of an `import()` of the new `react-dom/client`, which only exists in react 18. Due to vitejs/vite#6007, we have to do a little bit of trickery to stop vite from erroring out. The approach I'm taking here is: 1) Rewriting the import of `react-dom/client` to a dummy file if it can't be `require.resolve()`ed. This fixes the problem in production builds. 2) Additionally, adding `react-dom/client` to the list of `optimizeDeps.exclude` if the framework is react and the package can't be required. This is necessary to prevent vite from trying to pre-bundle, and throwing errors in dev. This PR also updates the examples to the new `6.5.0-alpha.58` version of storybook, which includes the PR mentioned above, so that it can be tested in our react examples, and it adds a new `react-18` example as well.
@valentinpalkovic, one final thing from you if you don't mind. If you could message me on Discord (same username), I'd appreciate it, I just want to follow up with you on an item related to this pull request. |
@valentinpalkovic, @shilman, there is a subtle issue in Valentin's repo that I can't put my finger on. It builds fine as is and both react app and storybook run fine. However if I delete package-lock.json and build from scratch then I get this error when trying to run storybook:
I even tried to pin the version of storybook from "^6.5.0-alpha.64" to "6.5.0-alpha.64" but still can't get the build to run from scratch. This is making it impossible to replicate Valentin's setup in my own repo where I performed the two steps as recommended and then substituting "^6.4.22" with "6.5.0-alpha.64". When I run storybook, I get the above error. The other thing I tried was to replace "^6.5.0-alpha.64" with "next" so that npm picks up the new beta version (which it is doing), but still getting the same error as above. Anything that I am missing? |
@nareshbhatia Could you tell me which node and npm version you are using? I try to replicate it then. And could you provide the new package-lock.json file? Then I can take a closer comparison on both versions. |
Sure, @valentinpalkovic.
Here's the package.json with the storybook versions pinned.
package-lock.json is attached. |
Sorry, attachment did not work in last message. Here it is again. |
Any update, @valentinpalkovic? Were you able to reproduce the issue? |
I think this should be a new issue, instead of a conversation in a PR that a lot of people are subscribed to. Would you mind creating one, ideally with a link to a github repo that reproduces the problem? |
New issue created: #18094 |
How do I switch to the new createRoot api? I am still getting this error with storybok and storybook/react 6.5.15 |
@ackvf This is an old PR with a lot of people subscribed to it. Please feel free to join our Discord (discord.gg/storybook) to ask for help, or open an issue clearly describing the problem, if you think there is a bug and don't see an existing issue tracking it. |
Issue: #10543 #17831
Currently, it is not possible to enable the new React Root API, which was introduced in React 17/18 (ReactDOM.createRoot). To test/use the newest concurrent features from React, it is necessary to mount a component differently. Instead of mounting it via
ReactDOM.render(reactElement, domElement)
a root has to be created (const root = ReactDOM.createRoot
). The new API provides new methods to render/unmount components.What I did
The new React Root Api (ReactDOM.createRoot) allows using the
newest concurrent features of React 18. A feature flag was added to
enable/disable the new Root API via the storybook's react options.
How to test
If your answer is yes to any of these, please make sure to include it in your PR.