Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Add "React peer dependency is no longer required" section to addon migration guide #25826

Merged
merged 9 commits into from
Feb 20, 2024
11 changes: 11 additions & 0 deletions docs/addons/addon-migration-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,17 @@ Please upgrade your addon to Node.js 18, as support for Node.js 16 has ended.

UI injected into panels, tools, etc. by addons is now rendered with React 18. Also note that the `key` prop is no longer passed to the render function.

### React peer dependency is no longer required
vanessayuenn marked this conversation as resolved.
Show resolved Hide resolved

To remove your addon's peer dependency on React, and reduce its install size, do the following:

1. Move `react`, `react-dom` and the globalized Storybook packages from `peerDependencies` to `devDependencies`
2. Add the list of globalized packages to the `externals` property in the `tsup` configuration, to ensure they are not part of the bundle.

For an example, see [the updates we've made to the addon-kit](https://github.com/storybookjs/addon-kit/pull/60/files#diff-8fed899bdbc24789a7bb4973574e624ed6207c6ce572338bc3c3e117672b2a20). These changes are optional but recommended.

Note: This assumes your addon is using tsup for bundling. If your addon was built with an older version of addon-kit that uses Babel for bundling, you have to first switch to tsup. For guidance, explore these [older changes implemented in the addon-kit](https://github.com/storybookjs/addon-kit/pull/45/files).
vanessayuenn marked this conversation as resolved.
Show resolved Hide resolved

### @storybook/components deprecations

`Icons` component from `@storybook/components` is now deprecated in favor of [`@storybook/icons`](https://github.com/storybookjs/icons). Additionally, various `Button` component props are also deprecated, with alternatives provided.
Expand Down
Loading