Storybook 10 addon peer dependencies requirement
Addon peer dependencies must point to `^10.0.0` to ensure broad compatibility for end users. Development dependencies can be set to `^10.0.0` or to `next` if trying the latest prerelease.
Storybook · Setup · all subjects
addon-migration-10
28 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Remove deprecated Storybook packages for addon development
If your addon still has `@storybook/addon-essentials`, `@storybook/addon-interactions`, `@storybook/addon-links`, or `@storybook/blocks` in dependencies, you must remove them. These packages are empty since Storybook 9 and will no longer be published going forward.
Supporting multiple Storybook versions in addons
If an addon supports multiple major versions of Storybook, you can specify a wider version range in peer dependencies using `^9.0.0 || ^10.0.0`. However, Storybook recommends releasing a new major version of your addon alongside new major versions of Storybook because it makes code maintenance easier, allows taking advantage of new features, and provides a clearer upgrade path for users.
Storybook 10 requires ESM-only addon builds
Storybook 10 requires all addons to be built as ESM-only. This change simplifies the build process and reduces maintenance overhead. The Node target moves from Node 20.0 to Node 20.19. You no longer need to build CJS files or pass `globalManagerPackages` and `globalPreviewPackages`.
TSup configuration changes for Storybook 10 addons
Updated tsup.config.ts should include: `splitting: true`, `format: ["esm"]`, externalize `react`, `react-dom`, and `@storybook/icons`. Remove `exportEntries` and switch to `previewEntries` and `managerEntries` based on consumption location. Manager and preview entries should use `target: "esnext"` since Storybook rebundles them. Node entries use `target: "node20.19"`. Only preview entries need `dts: true` for Portable Stories imports.
Package.json exports field for ESM addons
Update the `exports` field to remove CJS files: use `"default": "./dist/index.js"` instead of separate `import` and `require` entries. For preview, use `"types": "./dist/preview.d.ts"` with `"default": "./dist/preview.js"`. Update preset from `"./dist/preset.cjs"` to `"./dist/preset.js"` and manager to `"./dist/manager.js"`.
TSConfig changes for Storybook 10 addons
Update tsconfig.json with: `moduleResolution: "bundler"`, `module: "preserve"`, `target: "esnext"`, `lib: ["esnext", "dom", "dom.iterable"]`, `rootDir: "."`. Update `include` to include both `src/**/*` and `tsup.config.ts`.
Convert preset.js to ESM for Storybook 10
Change the `preset.js` file at the top-level of your addon from CJS to ESM. Replace `module.exports = require('./dist/preset.cjs');` with `export * from './dist/preset.js';`. This file used to be CJS because Storybook Node app only supported CJS, but Storybook 10 now supports ESM.
Local addon loading changes for ESM
Replace `.storybook/local-preset.cjs` with `.storybook/local-preset.ts` using ESM syntax and `import.meta.resolve()` for relative paths. Example: `export function previewAnnotations(entry = []) { return [...entry, fileURLToPath(import.meta.resolve('../dist/preview.js'))]; }`. Update `main.ts` to use `addons: [..., import.meta.resolve("./local-preset.ts")]`.
CSF Factories support in addons
To support CSF Factories annotations, update `src/index.ts` to use `definePreviewAddon` and export preview annotations. Replace empty default export with: `import { definePreviewAddon } from "storybook/internal/csf"; import addonAnnotations from "./preview"; export default () => definePreviewAddon(addonAnnotations);`. This allows users to chain preview configuration with better typing and flexibility.
Removal of exportEntries in Storybook 10
`exportEntries` in `package.json` bundler config has been removed. Move `src/index.ts` from `exportEntries` to `previewEntries` so code is bundled for browsers and usable with CSF Next. If exporting code for the manager (like `renderLabel`), create a new `src/manager-helpers.ts` file and add it to `managerEntries` instead.
Build file cleanup recommendation for addons
Add a `prebuild` script to `package.json` to remove old build files: `"prebuild": "node -e \"fs.rmSync('./dist', { recursive: true, force: true })\""`. This prevents the `dist` folder from growing with expired JS chunks.
Update addon package.json keywords
Update package.json keywords from `storybook-addons` (plural) to `storybook-addon` (singular).
Addon versioning strategy for Storybook 10
Release a new major version of your addon alongside Storybook 10.0. For experimental features or testing, use the `next` tag to gather feedback before releasing a stable version.
Knobs addon deprecated
The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. The Controls addon should be used instead.
Storyshots addon deprecated and removed
The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained, and was removed in Storybook 8. A migration guide is available for alternative approaches.
StoriesOf API removed
The storiesOf API was officially removed with the release of Storybook 8 and is no longer maintained. The CSF API should be used instead for writing stories.
Storysource addon removed
The Storysource addon was officially removed with the release of Storybook 9 and is no longer maintained. To display stories' source code, the codePanel parameter should be used instead.
Automatic migration from nextjs Webpack framework
Storybook provides an automatic migration tool for migrating from the Webpack-based Next.js framework to the Vite-based framework. Run: npx storybook automigrate nextjs-to-nextjs-vite. This tool updates package.json to replace @storybook/nextjs with @storybook/nextjs-vite, updates .storybook/main.js|ts framework property, and scans/updates import statements in story files and configuration files.
Manual migration from nextjs Webpack framework - install
To manually migrate from @storybook/nextjs to @storybook/nextjs-vite, first install the framework.
Manual migration from nextjs Webpack framework - update config
Then update your .storybook/main.js|ts to change the framework property to @storybook/nextjs-vite.
Migrate Webpack to Vite configuration
If your Storybook configuration contains custom Webpack operations in webpackFinal, you will likely need to create equivalents in viteFinal. See the Vite builder documentation for migration details.
Remove Storybook plugins after migration
If you were using Storybook plugins to integrate with Next.js, those are no longer necessary when using the nextjs-vite framework and can be removed.
Upgrade to Svelte CSF addon v5
Svelte CSF addon version 5 introduces breaking changes for Svelte 5 support. Users must replace the Meta component and meta named export with the defineMeta function, replace Template components with built-in children support in the Story component, update slots to use reusable snippets, and replace autodocs property with tags.
Svelte CSF addon v5 migration to defineMeta function
When upgrading to Svelte CSF addon v5, if you are using the Meta component or meta named export to define story metadata, update stories to use the new defineMeta function instead. This function returns an object with required information, including a Story component that must be used to define component stories. See svelte-csf-story-migration.md for example code.
Svelte CSF addon v5 Story component children support
In Svelte CSF addon v5, the Template component was replaced with built-in children support in the Story component. This enables composition of components and definition of UI structure directly in the story. See svelte-csf-story-custom-children.md for example code.
Svelte CSF addon v5 snippets support
Svelte CSF addon v5 introduces support for Svelte's snippets feature to replace slots. The Story component accepts a template snippet, allowing you to create dynamic stories without losing reactivity while extending the Story component with a custom snippet.
Svelte CSF addon v5 tags support replaces autodocs
In Svelte CSF addon v5, if you enabled automatic documentation generation with the autodocs story property, replace it with the tags property. This allows categorizing and filtering stories based on specific criteria and generating documentation based on applied tags.