globals annotation renamed to initialGlobals
In Storybook 9, the `globals` annotation in .storybook/preview.js has been renamed to `initialGlobals`. Update configuration from `globals: { theme: 'light' }` to `initialGlobals: { theme: 'light' }`.
configuration & setup
12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Node.js and TypeScript minimum versions
Storybook 9 requires Node.js 20 or higher and TypeScript 4.9 or higher.
Storybook requires at least one local story or docs page
Storybook does not work unless you have at least one local story (or docs page) defined in your project. Local means a .stories.* or .mdx file that is referenced in your project's .storybook/main.js config. For a Storybook composition scenario where you want an extra Storybook with no stories of its own to serve as a 'glue' for other Storybooks, you can introduce a single .mdx docs page (addon-docs required) that serves as an Introduction page, and refer to it in your Storybook config file.
Extensionless imports in .storybook/main config require explicit file extensions
Storybook requires explicit extensions in config imports to avoid deprecation warnings. When upgrading or running Storybook, you may see warnings about extensionless relative imports in .storybook/main.<js|ts> (for example: import sharedMain from '../main'). To fix the issue, include the extension of the file (TypeScript or Javascript) you're importing: import sharedMain from '../main.js' or import sharedMain from '../main.ts'.
TypeScript configuration for .storybook/main.ts imports
For TypeScript users with .storybook/main.ts, you need to configure TypeScript so these imports type-check without emitting JavaScript. Create a .storybook/tsconfig.json file with: { "extends": "<path-to-your-main-tsconfig>", "compilerOptions": { "moduleResolution": "bundler", "allowImportingTsExtensions": true, "noEmit": true } }. It is advisable to add this file so that you apply changes only to Storybook config files, and not your entire project.
Module resolution issues in monorepos and pnpm environments
If your project is set up within a monorepo, or uses a package manager with a non-standard node_modules layout (such as pnpm), you might run into issues with module resolution when running Storybook. The error message appears as: WARN Failed to load preset: "@storybook/react-webpack5/preset" Required package: @storybook/react-webpack5 (via "@storybook/react-webpack5/preset"). To fix this, you can wrap the package name inside your Storybook configuration file (i.e., .storybook/main.js|ts).
Environment variables must start with STORYBOOK_ prefix
By default, environment variables are only available in Node.js code and not in the browser. To expose a variable to browser code, prefix its name with STORYBOOK_. For example, STORYBOOK_API_URL is available in browser code but API_KEY is not. Additionally, the env field in .storybook/main.js can customize which variables are exposed.
Environment variables are set during JavaScript compilation
Environment variables are set when JavaScript is compiled, which occurs when the development server is started or when you build your Storybook. Environment variable files should not be committed to Git and should be added to .gitignore. Instead, set environment variables manually on your hosting provider.
STORYBOOK_PROJECT_ROOT environment variable
For large mono-repositories where you want to limit the upgrade to a specific directory, use the STORYBOOK_PROJECT_ROOT environment variable. Example: `STORYBOOK_PROJECT_ROOT=./packages/frontend storybook@latest upgrade`
experimentalReview and experimentalDocgenServer feature flags
When upgrading to Storybook 10.5, the automigration step offers to enable the experimental experimentalReview and experimentalDocgenServer feature flags. These are strictly opt-in and appear unchecked in the automigration prompt. Using `--yes` skips them unless they are explicitly named with the `--features` flag. If your configuration already sets one of them to true or false, that choice is left untouched and the flag is not offered. experimentalDocgenServer is only offered on frameworks that provide server-side docgen.
Storybook 9 minimum version requirements
Storybook 9 requires: Node 20+; Angular 18+; Lit v3+; Next.js 14+; Svelte 5+; Vite 5+; Vitest 3+; npm 10+; pnpm 9+; yarn 4+; TypeScript 4.9+.
Yarn PnP support removed in Storybook 11
Storybook 11 removes support for Yarn Plug'n'Play (PnP). The --use-pnp flag no longer exists on the storybook init and create storybook commands. Storybook no longer bootstraps or scaffolds projects with Yarn PnP enabled. New projects always use the standard node_modules layout. The detectPnp utility is no longer exported from storybook/internal/cli.