Storybook upgrade command handles peer dependencies
The `npx storybook@<version> upgrade` command automatically handles peer dependencies when upgrading Storybook packages, ensuring compatibility across all installed packages.
Storybook · Setup · all subjects
migration & upgrades
14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Upgrade Storybook packages command
Use `npx storybook@<VERSION> upgrade` to upgrade all Storybook packages in a project to a specific version. This command detects all @storybook/* packages in the project and upgrades them to the specified version while handling peer dependencies automatically. It works with npm, yarn, and pnpm.
Upgrade to canary version example
To upgrade to a canary version from a Storybook PR, run: `npx storybook@0.0.0-pr-33526-sha-a2e09fa2 upgrade`
Upgrade to latest stable example
To upgrade to the latest stable version, run: `npx storybook@latest upgrade`
Upgrade to specific release example
To upgrade to a specific release version like 8.5.0, run: `npx storybook@8.5.0 upgrade`
Do not manually install Storybook packages
Do not manually install storybook packages with `npm add`, `yarn add`, or `pnpm add`. Always use `npx storybook@<version> upgrade` to ensure all packages stay in sync and version resolution is handled correctly across all storybook packages.
Always upgrade one major version at a time
Always upgrade only one major version at a time. For example, upgrade 8.x → 9.x → 10.x → canary of 10. Never skip major versions, such as going directly from 8.x to 10.x.
Markdown files import changed in Storybook 7.0
As of Storybook 7.0, it is no longer possible to import .md files directly into Storybook using the transcludeMarkdown option. Instead, use the Markdown Doc Block for importing Markdown files into Storybook documentation.
Migration from webpack/CRA to Vite builder
To migrate from webpack or CRA: (1) Install vite and @storybook/builder-vite. (2) Remove explicit project dependencies on webpack, react-scripts, and other Webpack plugins or loaders. (3) Remove @storybook/manager-webpack5, @storybook/builder-webpack5, or @storybook/builder-webpack4 if installed. (4) Choose a Vite-based Storybook framework in .storybook/main.js. (5) Remove Storybook Webpack cache with `rm -rf node_modules/.cache`. (6) Update /public/index.html for Vite, removing any %PUBLIC_URL% variables. (7) Ensure files containing JSX use .jsx or .tsx extensions as Vite requires. (8) Create .storybook/preview-head.html with a script setting `window.global = window;` to work around jest-mock requiring the node global variable. (9) Run the same `yarn storybook` or `npm run storybook` commands.
Autodocs configuration using tags instead of parameters.docs.autodocs
Instead of using `parameters.docs.autodocs` in main.js, use the `tags` property in .storybook/preview.js or in individual stories. Add `tags: ['autodocs']` to generate autodocs for all stories.
Meta and StoryObj imports in Storybook 9
Update story imports to use the framework package instead of the renderer package. Change from `import { Meta, StoryObj } from '{{RENDERER}}';` to `import { Meta, StoryObj } from '{{FRAMEWORK}}';`
Test utility imports migration to storybook/test
Update test imports to use `storybook/test` instead of `@storybook/test`. Change from `import { fn } from '@storybook/test';` to `import { fn } from 'storybook/test';`
globals annotation renamed to initialGlobals
In Storybook 9, the `globals` annotation has been renamed to `initialGlobals` in the .storybook/preview.js file. Change from `globals: { theme: 'light' }` to `initialGlobals: { theme: 'light' }`
storybook-setup minimum version requirement
Storybook must be at least version 10.5 or the next pre-release version while 10.5 is not yet released. If the installed version is older or upgrade/repair is needed, switch to the storybook-upgrade skill instead.