Upgrading @storybook/react 7 to 8
Breaking7.6.24 → 8.6.19Breaking54Security14Platform7Deprecated3New143Changed273Fixed381Other58
BreakingUpgrade verdict
51 breaking changes and 7 platform requirement changes and 14 security fixes.
In plain terms
- Removes the a11y warnings API.
- The Vitest plugin entrypoint has a new name, so imports may need updating.
- Support for .stories.mdx story files is further removed, so those files will no longer be handled.
- The globals setting in preview.js is now called initialGlobals, so existing configs using globals must be updated.
Must act Top 5 of 75 that need code or config changes
@storybook/react publishes an official migration guide for version 8. It covers more than the release notes do.
Migration Guide ↗Node.js requirement changed in 8.0.0-alpha.3: >=16.0.0 → >=18.0.0.
Adds @storybook/components 8.6.19, @storybook/manager-api 8.6.19, @storybook/theming 8.6.19.
Drops @storybook/client-logger, @storybook/core-client, @storybook/docs-tools, @storybook/types, @types/escodegen, @types/estree, @types/node, acorn, acorn-jsx, acorn-walk, escodegen, html-tags, lodash, prop-types, react-element-to-jsx-string, ts-dedent, type-fest, util-deprecate.
Installs 6 packages in all (was 229).
What you must change
Breaking51
Removes the a11y warnings API.
Renames the Vitest plugin entrypoint.
Core removes more .stories.mdx handling.
.stories.mdxRenames preview.js globals to initialGlobals.
preview.jsglobalsinitialGlobalsDrops the unneeded
UPDATE_STORY_ARGS event that was for SSv6.UPDATE_STORY_ARGSRemoves the React requirement in non-React projects.
Removes the 'left' property from TooltipLinkList and Link components.
TooltipLinkListLinkRenames the
--webpack-stats-json CLI flag to --stats-json since it works in Vite.--webpack-stats-json--stats-jsonCLI removes the argTypesRegex automigration.
argTypesRegexCLI removes the logging to file feature from autoblockers.
Svelte removes deprecated SvelteComponentTyped in favor of SvelteComponent.
SvelteComponentTypedSvelteComponentRemoves defaultProps from the Link component in the UI package.
LinkdefaultPropsAdds
subcomponents support in ArgTypes and Controls, and removes the ArgsTable block.subcomponentsArgTypesControlsArgsTableParameters removes the passArgsFirst flag.
passArgsFirstPreset removes the deprecated config preset.
Removes deprecated APIs from the manager and preview API.
Removes the unused hideNoControlsWarning type from Addon Controls.
hideNoControlsWarningRemoves the deprecated Story type from Angular.
StoryRemoves deprecated properties from manager-api.
manager-apiRemoves the deprecated standalone webpackConfig option.
webpackConfigRemoves the storyStoreV7 feature flag.
storyStoreV7Removes deprecated createChannel APIs.
createChannelRemoves the babel and SWC compiler from the Webpack5 builder.
Webpack5Removes LinkTo from direct import in Addon Links.
LinkToRemoves deprecated parameters from Addon docs.
Removes StorybookViteConfig type in favor of StorybookConfig in Builder Vite.
StorybookViteConfigStorybookConfigRemoves collapseAll and expandAll methods from Core.
collapseAllexpandAllRemoves storyIndexers in favor of experimental_indexers.
storyIndexersexperimental_indexersRemoves unused staticDir type from Core.
staticDirRemoves deprecated props from the Description doc block.
DescriptionPrimarySourceStoryRemoves deprecated navigateToSettingsPage method from the Manager API.
navigateToSettingsPageRemoves deprecated setGlobalConfig portable stories API from React.
setGlobalConfigRemoves deprecated addons module types from TypeScript.
Removes DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta types.
DecoratorFnStoryComponentStoryComponentStoryObjComponentStoryFnComponentMetaRemoves Framework type in favor of Renderer types.
FrameworkRendererRemoves deprecated WithTooltip props from UI.
WithTooltipCLI removes the --use-npm flag.
--use-npmCore removes the unused warnOnLegacyHierarchySeparator type.
warnOnLegacyHierarchySeparatorRemoves the
-s flag from the build and dev commands.-sRemoves stories.json support from the API.
stories.jsonRemoves the
react peer dependency from Addon Docs.reactVue: Removes deprecated vue packages from next.
Vue: Removes the unused preset-vue-webpack.
preset-vue-webpackRemoves unused and deprecated packages from the monorepo.
Removes the
sb extract CLI command.sb extractRemoves the
storiesOf API.storiesOfRequires a modifier key to trigger the
F, A, D, S, T and / shortcuts.FADST/Errors on explicit actions while rendering or playing.
Changes StoryFnReactReturnType to JSX.Element.
StoryFnReactReturnTypeJSX.ElementReplaces
Form.Button with the new Button component.Form.ButtonButtonInteraction replaces @storybook/jest with @storybook/test.
@storybook/jest@storybook/testSecurity14
Prevents Highlight menu items from emitting arbitrary channel events.
Restricts preview postMessage to known manager origins.
postMessageSeparates manager and preview roles on the dev server channel.
Blocks iframe embedding of the dev server from non-localhost origins.
Rejects component search queries outside the project.
Validates component export name when creating a story.
Adds host validation warning and origin validation for MCP.
MCPContains save story path to the project root.
Validates save story name and arg keys as identifiers.
Disables browser file writes and command execution in Addon Vitest.
Hardens the websocket connection.
Replaces the ip function with a small helper function to address security concerns.
ipBumps webpack-dev-middleware to patch a high severity security issue.
webpack-dev-middlewareCore updates the ip dependency to fix CVE-2023-42282.
ipPlatform7
Adds @storybook/test as an optional peer dependency for ReactVite.
@storybook/testMakes prettier an optional peer dependency.
prettierRelaxes the peer dependency constraint of shim packages.
React: Supports v19 betas in peer dependencies.
CLI updates the minimum Node.js version requirement.
Updates the Node.js version requirement to >= 18.0.0.
Sets the engines field to Node.js >= 18 for packages.
enginesDeprecations to plan for
Deprecated3
Addon Themes deprecates useThemeParameters.
useThemeParametersEmits deprecated TESTING_MODULE_RUN_ALL_REQUEST for backward compatibility.
TESTING_MODULE_RUN_ALL_REQUESTRefactors preview and deprecates the story store.
story storeAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- added:
interface SymbolConstructor - added:
readonly property SymbolConstructor.observable: symbol
- changed:
const parameters: {} → const parameters: { renderer: string } - changed:
function renderToCanvas({ storyContext, unboundStoryFn, showMain, showException, forceRemount }: RenderContext<ReactRenderer>, canvasElement: ReactRenderer['canvasElement']): Promise<() => void> → function renderToCanvas({ storyContext, unboundStoryFn, showMain, showException, forceRemount }: RenderContext<ReactRenderer>, canvasElement: ReactRenderer['canvasElement']): Promise<() => Promise<void>> - added:
const beforeAll: () => Promise<void> - added:
const decorators: Decorator[] - added:
const mount: BaseAnnotations<ReactRenderer>['mount']
- changed:
const parameters: { docs: { story: { inline: boolean }; extractArgTypes: _storybook_docs_tools.ArgTypesExtractor; extractComponentDescription: typeof extractComponentDescription… → const parameters: { docs: { story: { inline: boolean }; extractArgTypes: ArgTypesExtractor; extractComponentDescription: (component?: any) => string } }
- added:
const parameters: { react: { rsc: boolean } }
- removed:
const configure: ClientApi['configure'] - removed:
const forceReRender: ClientApi['forceReRender'] - removed:
const raw: ClientApi['raw'] - removed:
const storiesOf: ClientApi['storiesOf'] - removed:
export { ArgTypes } from '@storybook/types' - removed:
export { Args } from '@storybook/types' - removed:
export { Parameters } from '@storybook/types' - removed:
export { StrictArgs } from '@storybook/types' - removed:
function setGlobalConfig(projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]): void - removed:
type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>> - removed:
type ComponentStory<T extends JSXElement> = ComponentStoryFn<T> - removed:
type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>> - removed:
type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>> - removed:
type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs> - removed:
type DecoratorFn = DecoratorFunction<ReactRenderer> - removed:
type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs> - removed:
type Meta<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>] ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>> : ComponentAnnotations<ReactRenderer, TCmpOrArgs> - removed:
type Preview = ProjectAnnotations<ReactRenderer> - removed:
type Story<TArgs = Args> = StoryFn<TArgs> - removed:
type StoryContext<TArgs = StrictArgs> = StoryContext$1<ReactRenderer, TArgs> - removed:
type StoryFn<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>] ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>> : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs> - removed:
type StoryObj<TMetaOrCmpOrArgs = Args> = [TMetaOrCmpOrArgs] extends [{ render?: ArgsStoryFn<ReactRenderer, any>; component?: infer Component; args?: infer DefaultArgs }] ? Simplify<(Component extends… - changed:
function composeStory<TArgs extends Args = Args>(story: StoryAnnotationsOrFn<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): _storybook_types.ComposedStoryFn<ReactRenderer, Partial<TArgs>> → function composeStory<TArgs extends Args = Args>(story: StoryAnnotationsOrFn<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): ComposedStoryFn<ReactRenderer, Partial<TArgs>> - changed:
function setProjectAnnotations(projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]): void → function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]): NormalizedProjectAnnotations<ReactRenderer> - added:
const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<ReactRenderer> - added:
export { A as AddMocks } from './public-types-[hash]' - added:
export { ArgTypes } from 'storybook/internal/types' - added:
export { Args } from 'storybook/internal/types' - added:
export { D as Decorator } from './public-types-[hash]' - added:
export { L as Loader } from './public-types-[hash]' - added:
export { Meta } - added:
export { P as Preview } from './public-types-[hash]' - added:
export { Parameters } from 'storybook/internal/types' - added:
export { ReactPreview } from './preview' - added:
export { S as StoryFn } from './public-types-[hash]' - added:
export { StrictArgs } from 'storybook/internal/types' - added:
export { __definePreview } from './preview' - added:
export { a as ReactParameters } from './types-[hash]' - added:
export { a as StoryObj } from './public-types-[hash]' - added:
export { b as StoryContext } from './public-types-[hash]'
- added:
export { createPlaywrightTest as createTest } from 'storybook/internal/preview-api'
- changed:
const addons: StorybookConfig['addons'] → const addons: PresetProperty<'addons'> - changed:
const previewAnnotations: StorybookConfig['previewAnnotations'] → const previewAnnotations: PresetProperty<'previewAnnotations'> - added:
const resolvedReact: (existing: any) => Promise<any>
- added:
function __definePreview(preview: ReactPreview['input']): ReactPreview - added:
interface ReactPreview extends Preview<ReactRenderer> - added:
method ReactPreview.meta<TArgs extends Args, Decorators extends DecoratorFunction<ReactRenderer, any>, TMetaArgs extends Partial<TArgs>>(meta: { render?: ArgsStoryFn<ReactRenderer, TArgs>; component?: ComponentType<TArgs>; decorators?: Decorators | Decorators[]; args?: TMetaArgs } & Omit<ComponentAnnotations<ReactRenderer, TArgs>, 'decorators'>): ReactMeta<{ args: Simplify<TArgs & Simplify<Remove…
- added:
declare global - added:
type A<TArgs, DefaultArgs> = Simplify<{ [T in keyof TArgs]: T extends keyof DefaultArgs ? DefaultArgs[T] extends (...args: any) => any & { mock: {} } ? DefaultArgs[T] : TArgs[T] : TArgs[T]… - added:
type D<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs> - added:
type L<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs> - added:
type M<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>] ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>> : ComponentAnnotations<ReactRenderer, TCmpOrArgs> - added:
type P = ProjectAnnotations<ReactRenderer> - added:
type S<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>] ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>> : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs> - added:
type a<TMetaOrCmpOrArgs = Args> = [TMetaOrCmpOrArgs] extends [{ render?: ArgsStoryFn<ReactRenderer, any>; component?: infer Component; args?: infer DefaultArgs }] ? Simplify<(Component extends… - added:
type b<TArgs = StrictArgs> = StoryContext$1<ReactRenderer, TArgs> - added:
type c<AnyType, Options extends SimplifyOptions = {}> = Flatten<AnyType> extends AnyType ? Flatten<AnyType, Options> : AnyType - added:
type d<BaseType, Keys extends keyof BaseType> = Simplify<Except<BaseType, Keys> & Partial<Pick<BaseType, Keys>>>
- added:
interface a - added:
property R.mount: (ui?: JSX.Element) => Promise<Canvas> - added:
property a.react?: { rsc?: boolean; rootOptions?: { onCaughtError?: (error: unknown) => void } }