Need guidance on avoiding triple-bundling React

[maxpatiiuk]

We have a shared storybook utils package that declares common react components for usages in multiple storybooks we have. These components may be rendered in the manager bundle (addon tabs) or preview bundle (custom documentation tables)

The issue is with React being bundled multiple times:

• Storybook bundles React 18 into the manager bundle
• Storybook does not bundle react into the preview bundle, but addon-docs and few others expect user to provide react (using peer dependency)

What should our shared storybook utils package do? If it imports React using ESM import, then react will be bundled into the manager bundle, causing duplication with the Storybook-bundled react. And this breaks if react versions mismatch (storybook manager uses react 18, but we use react 19)

Should our code access the __REACT__ and __REACT_DOM__ globals that Storybook exposes in the manager bundle? But this is fragile, not typescript-safe, and complicates the build pipeline (requires esm imports and jsx-runtime imports to be rewritten).

For reference, in the preview bundle, we are using @storybook/web-components for stories, but React for docs components.

Looking for guidance on how Storybook team recommends we handle this to avoid bundling react multiple times (with potentially incompatible versions being bundled in).

Potentially related to #22521