Peer dependency issue on project using React < 18.2.0

[lordfpx]

Affected design types

• figma
• figspec
• link
• image
• iframe

Describe the bug

On a React project having for peer dependency React >=16.8.0 and Storybook 8.0.5, I've got the following error when running npm i:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @storybook/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   dev react@"^16.8.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/[email protected]
npm ERR!   node_modules/@emotion/use-insertion-effect-with-fallbacks
npm ERR!     @emotion/use-insertion-effect-with-fallbacks@"^1.0.1" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/theming
npm ERR!       dev @storybook/theming@"^8.0.5" from the root project
npm ERR!       5 more (@storybook/addon-designs, @storybook/addon-docs, ...)
npm ERR!   89 more (@figspec/react, @floating-ui/react-dom, @mdx-js/react, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional react@"^18.2.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-designs
npm ERR!   dev @storybook/addon-designs@"^8.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peerOptional react@"^18.2.0" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/addon-designs
npm ERR!     dev @storybook/addon-designs@"^8.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

How to reproduce the bug?

1. On a React project having for peer dependencies : react and react-dom >=16.8.0
2. upgrade project from Storybook 7.x to Storybook 8.x
3. run npm i

Expected behaviour

All other Storybook addons are working fine except addon-design, the addon should work on every project.

Environment

• Chrome / Chromium / Chromium based browsers
• Firefox
• macOS Safari
• iOS Safari
• Samsung Internet
• Other

Affected versions

8.0.0

Storybook versions

8.0.5

[pocka]

#232 (https://github.com/storybookjs/addon-designs/pull/232/files#diff-23796015e5938255257e72d830d440210ea4241e52778f4213627aa33685c40b)

[lordfpx]

@pocka Yes I know and that's the problem. Looking at the code diff, the React dependency version doesn't seem to be needed and it breaks the addon on projects with older versions.

[JReinhold]

I think you're right @lordfpx, I can't remember why I narrowed the React peer dependency from 16+17+18 to require 18.2. But looking at the block's usage of React I don't see why that would be necessary.

Feel free to open a PR to widen the range again.

[pocka]

Fixed in v8.0.1 (#237)

[lordfpx]

Thanks a lot!