[Bug]: Addon being forced to use React v16.14.0 in storybook 7 (v18 worked in 6)

[neil-morrison44]

Describe the bug

In previous versions of storybook the import React from "react" in my register.tsx would find version 18 as expected, but now it seems to be given v16.14.0.

https://github.com/neil-morrison44/storybook-addon-recoil-flow/blob/073490700fdca76c24593d6e4009238426b53777/src/register.tsx#L6

v16 doesn't appear at all when doing npm list react (all react@18.2.0) so I'm really not sure where it's coming from (I know storybook pre-bundles itself now so I'm guessing it could be that?)

I've tried using esbuild to pre-bundle my addon but I get Rule of Hooks warnings about different versions of React (which makes sense, I guess)

I'm using react-three-fiber which needs to use React 18 features (useId is the first one it'll error on)

Thanks

To Reproduce

The storybook can be found in my draft PR for updating to storybook 7: neil-morrison44/storybook-addon-recoil-flow#4 (it's pretty much a new storybook + the addon)

Though, if I do manage to find a workaround in the interim you'll want the one from this commit: https://github.com/neil-morrison44/storybook-addon-recoil-flow/tree/073490700fdca76c24593d6e4009238426b53777

System

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 109.0.1
    Safari: 16.4
  npmPackages:
    @storybook/addon-actions: ^7.0.6 => 7.0.6 
    @storybook/addon-essentials: ^7.0.6 => 7.0.6 
    @storybook/addon-interactions: ^7.0.6 => 7.0.6 
    @storybook/addon-links: ^7.0.6 => 7.0.6 
    @storybook/cli: ^7.0.6 => 7.0.6 
    @storybook/react: ^7.0.6 => 7.0.6 
    @storybook/react-webpack5: ^7.0.6 => 7.0.6 
    @storybook/testing-library: ^0.1.0 => 0.1.0 

Additional context

neil-morrison44/storybook-addon-recoil-flow#4 (PR link again, if I happen upon a workaround it'll be there)

[neil-morrison44]

I've got a workaround for this:

• Creating a new "react-dom/client" root for v18
• Using esbuild to bundle it
• Setting up the v18 root on a useRef'd div rendered inside AddonPanel
• Using window.postMessage to bridge the "@storybook/api" useChannel from the v16 React world into the v18 world

(can see it on the PR linked above)

Isn't nice though, so obviously I'd rather not have to do it

[shilman]

This seems like a limitation of the new manager bundling. I can't imagine why it worked in previous versions. This will be fixed by #21673

[neil-morrison44]

I think previously it must have been using whichever version of React was around to build the components in the storybook, the storybook itself & the addons.

Even though the storybook was asking for React 16, that’s the only way it could have been working before I think

[daniel-stoian-lgp]

I'm not sure if I get the same issue:
I get and invalid use of hooks error: " Invalid hook call. Hooks can only be called inside of the body of a function component."
When I look at the React tree, i see this:

npm list react and npm list react-dom show only one version: 18.2.0

[vaynevayne]

I also encountered the same problem, my hook is invalid, I do not know who came from react16, anyone to deal with this problem?

[vaynevayne]

@daniel-stoian-lgp maybe this,
It uses react16, but the package is tsc, which will package devDepen into it
https://github.com/naver/storybook-addon-preview/blob/master/package.json