React: Add support for react18's new root API #17215

valentinpalkovic · 2022-01-12T11:11:07Z

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

Is this testable with Jest or Chromatic screenshots?
Does this need a new example in the kitchen sink apps?
Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

nx-cloud · 2022-01-12T11:11:13Z

☁️ Nx Cloud Report

CI 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 target

nx run-many --target=prepare --all --parallel --max-parallel=15 -- --optimized

Sent with 💌 from NxCloud.

brutus-law · 2022-01-25T22:39:04Z

Definitely needing something like this to start upgrading to React 18 for Suspense on internal apps. Any timeline on when this is mergable?

shilman · 2022-02-09T10:35:35Z

Hoping to look in the next week. Thanks for your patience!

shilman

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.

app/react/src/client/preview/render.tsx

docs/faq.md

app/react/types/index.ts

app/react/src/client/preview/render.tsx

docs/faq.md

shilman

An additional question after reviewing with @kylegach @ndelangen @yannbf 😄

app/react/src/client/preview/render.tsx

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>

app/react/src/client/preview/render.tsx

app/react/types/index.ts

yannbf · 2022-03-25T19:54:53Z

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.

IanVS · 2022-04-06T20:45:22Z

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.

…ithub.com/valentinpalkovic/storybook into pr/17215

shilman

@valentinpalkovic @ndelangen tremendous job on this!! 🎉

shilman · 2022-04-07T02:49:31Z

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.

jonniebigodes · 2022-04-11T17:00:02Z

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

nareshbhatia · 2022-04-24T16:15:32Z

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

ModuleNotFoundError: Module not found: Error: Can't resolve '@mdx-js/react' in '/Users/naresh/projects/cra-with-storybook-valentinpalkovic/src/stories'
    at /Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/webpack/lib/Compilation.js:2016:28
    at /Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/webpack/lib/NormalModuleFactory.js:798:13
    at eval (eval at create (/Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/webpack/lib/NormalModuleFactory.js:270:22
    at eval (eval at create (/Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/webpack/lib/NormalModuleFactory.js:434:22
    at /Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/webpack/lib/NormalModuleFactory.js:116:11
    at /Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/webpack/lib/NormalModuleFactory.js:670:25
    at /Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/webpack/lib/NormalModuleFactory.js:855:8
    at /Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/webpack/lib/NormalModuleFactory.js:975:5
    at /Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/neo-async/async.js:6883:13
    at /Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/webpack/lib/NormalModuleFactory.js:958:45
    at finishWithoutResolve (/Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
    at /Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/enhanced-resolve/lib/Resolver.js:386:15
    at /Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/naresh/projects/cra-with-storybook-valentinpalkovic/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)

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?

valentinpalkovic · 2022-04-25T04:55:01Z

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

nareshbhatia · 2022-04-25T11:29:15Z

Sure, @valentinpalkovic.

$ node -v
v16.13.2
$ npm -v
8.4.0

Here's the package.json with the storybook versions pinned.

{
  "name": "storybook-test-react-18",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.27",
    "@types/react": "^18.0.6",
    "@types/react-dom": "^18.0.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@storybook/addon-actions": "6.5.0-alpha.64",
    "@storybook/addon-essentials": "6.5.0-alpha.64",
    "@storybook/addon-interactions": "6.5.0-alpha.64",
    "@storybook/addon-links": "6.5.0-alpha.64",
    "@storybook/builder-webpack5": "6.5.0-alpha.64",
    "@storybook/manager-webpack5": "6.5.0-alpha.64",
    "@storybook/react": "6.5.0-alpha.64",
    "@storybook/testing-library": "^0.0.11",
    "babel-loader": "^8.2.5",
    "webpack": "^5.72.0"
  }
}

package-lock.json is attached.

nareshbhatia · 2022-04-25T11:31:14Z

package-lock.txt

Sorry, attachment did not work in last message. Here it is again.

nareshbhatia · 2022-04-28T14:53:01Z

Any update, @valentinpalkovic? Were you able to reproduce the issue?

IanVS · 2022-04-28T15:17:05Z

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?

nareshbhatia · 2022-04-28T15:58:00Z

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

ackvf · 2022-12-21T21:15:56Z

How do I switch to the new createRoot api? I am still getting this error with storybok and storybook/react 6.5.15

IanVS · 2022-12-22T00:49:56Z

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

valentinpalkovic changed the title ~~Add possibility of using new React Root Api~~ Add the possibility to use the new React Root Api Jan 12, 2022

valentinpalkovic changed the title ~~Add the possibility to use the new React Root Api~~ Add the possibility to use the new React Root Api (React 18) Jan 12, 2022

shilman added react feature request labels Jan 13, 2022

shilman requested changes Feb 10, 2022

View reviewed changes

lmestel mentioned this pull request Feb 10, 2022

upgrade to react 18 kickstartDS/kickstartDS#831

Closed

shilman reviewed Feb 14, 2022

View reviewed changes

app/react/src/client/preview/render.tsx Show resolved Hide resolved

Valentin Palkovič and others added 12 commits February 23, 2022 15:40

Add possibility of using new React Root Api

ae474c2

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.

Reverse logic of callback div in CallbackWrapper

fee8459

Use FRAMEWORK_OPTIONS to use new React Root API conditionally

fc5128f

docs: Add documentation to faq page

983534d

Update docs/faq.md

0479139

Co-authored-by: Michael Shilman <shilman@users.noreply.github.com>

Update docs/faq.md

d1d8cff

Co-authored-by: Michael Shilman <shilman@users.noreply.github.com>

Rename newREactRootApi to newRootApi

b50177d

Prevent memory leaks and possible race conditions

afed20a

Transform class-based CallbackWrapper to function-based component

505f99b

Simplify structure of getReactRoot

ca4bced

Use setTimeout instead of CallbackWrapper

4899f37

Rename types field from newReactRootApi to newRootApi

5e3f711

valentinpalkovic force-pushed the render-react-components-with-new-root-api branch from 2cd13d2 to 5e3f711 Compare February 23, 2022 14:41

shilman assigned shilman and chantastic Mar 7, 2022

thure reviewed Mar 22, 2022

View reviewed changes

app/react/src/client/preview/render.tsx Outdated Show resolved Hide resolved

himself65 reviewed Mar 25, 2022

View reviewed changes

app/react/types/index.ts Outdated Show resolved Hide resolved

Merge branch 'next' into render-react-components-with-new-root-api

55ec6d4

add react 18 config to e2e scripts

b908cf3

Support react experimental versions

0f118a3

shilman added 2 commits April 7, 2022 10:44

React: Add react18 new root API migration instructions

bcb93ec

Merge branch 'render-react-components-with-new-root-api' of https://g…

40747e0

…ithub.com/valentinpalkovic/storybook into pr/17215

shilman approved these changes Apr 7, 2022

View reviewed changes

shilman merged commit 06cdf8c into storybookjs:next Apr 7, 2022

shilman mentioned this pull request Apr 7, 2022

Render React componentes with Concurrent Mode #10543

Closed

IanVS mentioned this pull request Apr 7, 2022

Support React 18 storybookjs/builder-vite#320

Merged

valentinpalkovic deleted the render-react-components-with-new-root-api branch April 7, 2022 05:14

ndelangen mentioned this pull request Apr 7, 2022

Migration to Emotion 11 #17640

Merged

3 tasks

nareshbhatia mentioned this pull request Apr 8, 2022

Storybook does not support React 18 nareshbhatia/custom-react-stack#1

Open

IanVS mentioned this pull request Apr 22, 2022

Fix NPM7 peer dependencies #14119

Closed

2 tasks

nareshbhatia mentioned this pull request Apr 28, 2022

MDX2: Can't resolve '@mdx-js/react' #18094

Closed

shilman mentioned this pull request May 18, 2022

Storybook 6.5 release 👟 #16797

Closed

shilman mentioned this pull request Oct 30, 2022

React 18 createRoot supports #18045

Closed

thebuilder mentioned this pull request Dec 24, 2022

addon-docs: React 18 upgrade #20402

Closed

thebuilder mentioned this pull request Jan 1, 2023

addon-docs: upgrade to React 18 Root API #20466

Closed

ndelangen mentioned this pull request Jan 14, 2023

Upgrade React version of manager #20420

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React: Add support for react18's new root API #17215

React: Add support for react18's new root API #17215

valentinpalkovic commented Jan 12, 2022 •

edited by shilman

Loading

nx-cloud bot commented Jan 12, 2022 •

edited

Loading

brutus-law commented Jan 25, 2022

shilman commented Feb 9, 2022

shilman left a comment

shilman left a comment

yannbf commented Mar 25, 2022

IanVS commented Apr 6, 2022

shilman left a comment

shilman commented Apr 7, 2022

jonniebigodes commented Apr 11, 2022

nareshbhatia commented Apr 24, 2022

valentinpalkovic commented Apr 25, 2022 •

edited

Loading

nareshbhatia commented Apr 25, 2022 •

edited

Loading

nareshbhatia commented Apr 25, 2022

nareshbhatia commented Apr 28, 2022

IanVS commented Apr 28, 2022

nareshbhatia commented Apr 28, 2022

ackvf commented Dec 21, 2022 •

edited

Loading

IanVS commented Dec 22, 2022

React: Add support for react18's new root API #17215

React: Add support for react18's new root API #17215

Conversation

valentinpalkovic commented Jan 12, 2022 • edited by shilman Loading

What I did

How to test

nx-cloud bot commented Jan 12, 2022 • edited Loading

☁️ Nx Cloud Report

brutus-law commented Jan 25, 2022

shilman commented Feb 9, 2022

shilman left a comment

Choose a reason for hiding this comment

shilman left a comment

Choose a reason for hiding this comment

yannbf commented Mar 25, 2022

IanVS commented Apr 6, 2022

shilman left a comment

Choose a reason for hiding this comment

shilman commented Apr 7, 2022

jonniebigodes commented Apr 11, 2022

nareshbhatia commented Apr 24, 2022

valentinpalkovic commented Apr 25, 2022 • edited Loading

nareshbhatia commented Apr 25, 2022 • edited Loading

nareshbhatia commented Apr 25, 2022

nareshbhatia commented Apr 28, 2022

IanVS commented Apr 28, 2022

nareshbhatia commented Apr 28, 2022

ackvf commented Dec 21, 2022 • edited Loading

IanVS commented Dec 22, 2022

valentinpalkovic commented Jan 12, 2022 •

edited by shilman

Loading

nx-cloud bot commented Jan 12, 2022 •

edited

Loading

valentinpalkovic commented Apr 25, 2022 •

edited

Loading

nareshbhatia commented Apr 25, 2022 •

edited

Loading

ackvf commented Dec 21, 2022 •

edited

Loading