[Bug]: "ReactDOM.render is no longer supported in React 18" error present even with 7.2.3 --- Repro Added ---

[aldrichdev]

Describe the bug

I see the following error in the console every time I click into a story or docs page:

react-dom.development.js:86 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

To Reproduce

1. Go to https://stackblitz.com/edit/github-x8xvpn?file=package.json
2. Once Storybook loads, click on any story of the Button component
3. Check the browser console and observe the error is present: ReactDOM.render is no longer supported in React 18. It will occur every time a story is loaded.

System

Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
  Binaries:
    Node: 16.14.0 - ~\AppData\Local\nvs\node\16.14.0\x64\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.3.1 - ~\AppData\Local\nvs\node\16.14.0\x64\npm.CMD
  Browsers:
    Chrome: 115.0.5790.171
    Edge: Spartan (44.19041.1266.0), Chromium (115.0.1901.200)
  npmPackages:
    @storybook/addon-essentials: 7.0.4 => 7.0.4
    @storybook/addon-interactions: 7.0.4 => 7.0.4
    @storybook/addon-links: 7.0.4 => 7.0.4
    @storybook/blocks: 7.0.4 => 7.0.4
    @storybook/preset-create-react-app: 7.0.4 => 7.0.4
    @storybook/react: 7.0.4 => 7.0.4
    @storybook/react-webpack5: 7.0.4 => 7.0.4
    @storybook/testing-library: 0.0.14-next.2 => 0.0.14-next.2

Additional context

Reproducible since 7.0.4

[shilman]

We have code specifically trying to handle this case and AFAIK it's been solved, though it's possibly a windows bug or maybe something regressed. If you can provide a reproduction repo we'd be happy to take a look. Go to https://storybook.new or see repro docs. Thank you! 🙏

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[aldrichdev]

@shilman Here is a reproduction of the issue: https://stackblitz.com/edit/github-x8xvpn?file=package.json

You will see the error in the console.

[shilman]

Thanks for the reproduction @aldrichdev !! I can see the warning in the stackblitz repro but it's not immediately obvious to me what's going on. This should be handled by Storybook. I'll see if somebody from the team can take a look and diagnose!

[valentinpalkovic]

This is already fixed on next. You can try out the latest prerelease ^8.0.0-alpha.6.

[aldrichdev]

This is already fixed on next. You can try out the latest prerelease ^8.0.0-alpha.6.

Hi @valentinpalkovic , this is awesome! I tried testing the new prerelease and I saw some errors. My project is currently running 7.2.3, so I changed all Storybook packages that were at that version, to ^8.0.0-alpha.6 (storybook and all @storybook/ packages), and I see these errors in many MDX files when starting up Storybook:

TypeError: this.getData is not a function
TypeError: this.setData is not a function

Just sharing this in case you know of something I can try to resolve that.

Also, just wondering, since the fix is part of the 8.0.0 alpha, does that mean that this fix won't be available within a stable release until Storybook 8 launches?

[valentinpalkovic]

Is the error a fatal error that stops Storybook completely? Or is it rather a warning? I would suggest opening a new issue since it has very likely nothing to do with the original issue.

I don't have the context anymore of which PR was fixing the issue. Therefore I can't say for sure whether this gets patched back to 7.x.

[ginnymin]

Hi @valentinpalkovic , this is awesome! I tried testing the new prerelease and I saw some errors. My project is currently running 7.2.3, so I changed all Storybook packages that were at that version, to ^8.0.0-alpha.6 (storybook and all @storybook/ packages), and I see these errors in many MDX files when starting up Storybook:

TypeError: this.getData is not a function
TypeError: this.setData is not a function

Just sharing this in case you know of something I can try to resolve that.

Also, just wondering, since the fix is part of the 8.0.0 alpha, does that mean that this fix won't be available within a stable release until Storybook 8 launches?

Hi @aldrichdev, did you ever resolve the TypeError: this.getData is not a function errors? We just started seeing these after upgrading from 7 to 8.

[stephiescastle]

Hi @aldrichdev, did you ever resolve the TypeError: this.getData is not a function errors? We just started seeing these after upgrading from 7 to 8.

@ginnymin this is happening to me too :(