configuration

333 notes in this subject, read out of this brain and free to use. This is page 4 of 6.

@storybook/nextjs-vite/headers.mock module

This module exports writable mocked implementations of cookies, headers, and draftMode from the next/headers module. Unlike Next.js's default read-only headers() export, this module exposes methods: headers().append(name, value), headers().delete(name), and headers().set(name, value). For cookies, you can use the existing API. All are mocks so you can use mock utilities like headers().getAll.mock.calls.

@storybook/nextjs-vite/cache.mock module

This module exports mocked implementations of the next/cache module's exports. Type: typeof import('next/cache'). You can use it to create your own mock implementations or assert on mock calls in a story's play function.

Absolute imports from root directory

Absolute imports from the root directory are supported in Storybook for Next.js with Vite. You can import components and styles using paths relative to the root, both in story files and in the .storybook/preview.tsx file.

Absolute imports cannot be mocked

Absolute imports cannot be mocked in stories or tests.

Module aliases support

Module aliases defined in tsconfig.json or jsconfig.json are supported in Storybook for Next.js with Vite. You can import components and styles using configured aliases like @/components.

Subpath imports support

Subpath imports are supported as an alternative to module aliases. Define the imports property in your package.json file to map subpaths to actual file paths. This follows Node package standards and has benefits when mocking modules.

Subpath imports replace module aliases

Subpath imports replace module aliases, so you can remove the path aliases from your TypeScript configuration when using subpath imports.

Mocking modules in Storybook

Components often depend on modules that are imported into the component file. When rendering those components in Storybook or testing them, you may want to mock those modules to control and assert their behavior.

Built-in mocked Next.js modules

This framework provides mocks for many of Next.js's internal modules: @storybook/nextjs-vite/cache.mock, @storybook/nextjs-vite/headers.mock, @storybook/nextjs-vite/navigation.mock, and @storybook/nextjs-vite/router.mock.

Vite vs Webpack framework recommendation

Use @storybook/nextjs-vite for most projects because it offers faster builds and development server startup, better support for modern testing features like the Vitest addon, simpler configuration without Babel, and better developer experience with faster HMR. However, if your project has custom Webpack configurations incompatible with Vite or you need specific Webpack features, use @storybook/nextjs (Webpack 5) instead.

Mock other modules with automocking

To mock modules other than the built-in Next.js mocks, use automocking or one of the alternative methods documented in the mocking modules guide.

image option for framework

Type: object. Props to pass to every instance of next/image. See next/image docs for more details.

builder option for framework

Type: Record<string, any>. Configure options for the framework's builder. For Next.js with Vite, available options can be found in the Vite builder docs.

TypeScript support for Next.js absolute imports

Storybook handles most TypeScript configurations and adds additional support for Next.js's absolute imports and module path aliases by taking into account your tsconfig.json's baseUrl and paths properties.

React Server Components experimental support

Storybook can render React Server Components (RSC) in stories in the browser if your app uses RSC. This is an experimental feature.

@storybook/nextjs-vite/router.mock module

This module exports mocked implementations of next/router module exports. Type: typeof import('next/router') & getRouter. It also exports a getRouter function that returns a mocked version of Next.js's router object from useRouter, allowing properties to be manipulated and asserted on.

Enable experimental RSC feature flag

To enable React Server Components rendering, set the experimentalRSC feature flag in your .storybook/main.js|ts config.

RSC experimental feature wraps in Suspense

Setting the experimentalRSC flag automatically wraps your story in a Suspense wrapper, which is able to render asynchronous components in NextJS's version of React.

Disable RSC wrapper per story

If the RSC Suspense wrapper causes problems in existing stories, you can selectively disable it using the react.rsc parameter at the global/component/story level.

Mock server-side resources for RSC

Wrapping server components in Suspense does not help if your server components access server-side resources like the file system or Node-specific libraries. To work around this, use Vite aliases or an addon like storybook-addon-module-mock to mock your data access layer.

Run Storybook dev server command

To run Storybook for a Preact project, use the storybook run command. The exact command is provided in the storybook-run-dev.md code snippet.

Preact with Vite framework availability

Storybook for Preact & Vite is a framework that makes it easy to develop and test UI components in isolation for Preact applications built with Vite.

Preact version requirement

Preact versions 8.x or 10.x are required for Storybook Preact with Vite.

Vite version requirement

Vite version 5 or higher is required for Storybook Preact with Vite.

Manual Preact framework installation

To manually install the Preact framework, first install the framework package using the preact-vite-install.md command, then update the .storybook/main.js|ts file to change the framework property using the preact-vite-add-framework.md configuration.

Migrate from React Webpack to React Vite framework

The storybook upgrade command automatically prompts migration to @storybook/react-vite when run on a React Webpack Storybook project. If auto-migration does not work, manual installation instructions are available.

React Vite framework builder configuration option

The framework options include a `builder` property of type Record<string, any>. This property configures options for the framework's builder. For React with Vite, available builder options can be found in the Vite builder documentation.

Manual React Vite framework installation

To manually install the React framework: first install the @storybook/react-vite package. Then update the `.storybook/main.js|ts` configuration file to change the framework property to @storybook/react-vite.

React with Vite minimum version requirements

React version must be 16.8 or higher. Vite version must be 5 or higher.

Run Storybook development server for React Vite

To run Storybook for a React with Vite project, use the storybook run command from the project root.

React Native Web Vite framework configuration options

The React Native Web Vite framework accepts the following options in .storybook/main.ts: modulesToTranspile (array of strings for libraries not transpiled for web by default), pluginReactOptions (object for babel plugins and presets with properties: jsxRuntime (string, default 'automatic', values 'automatic' or 'classic'), jsxImportSource (string, default 'react'), babel (object with plugins array and presets array), include (array of strings or RegExp), exclude (array of strings or RegExp), and other @vitejs/plugin-react options), and builder (record for Vite builder configuration).

Example: React Native Web Vite configuration with reanimated

To use react-native-reanimated with React Native Web Vite, configure the framework options in .storybook/main.ts with pluginReactOptions.babel.plugins including '@babel/plugin-proposal-export-namespace-from' and 'react-native-reanimated/plugin'.

Example: React Native Web Vite configuration with nativewind

To use nativewind with React Native Web Vite, set pluginReactOptions.jsxImportSource to 'nativewind' in the framework options in .storybook/main.ts.

Example: React Native Web Vite configuration to transpile additional node_modules

To transpile a custom library like 'my-library' that is not transpiled for web by default, add it to the modulesToTranspile option in the framework configuration in .storybook/main.ts.

React Native vs React Native Web comparison

Storybook supports two options for React Native components: Native (runs inside React Native application, high-fidelity but limited features) and Web (displays components in browser using react-native-web, feature-rich and mature). Choose Native if you need native features or mobile publication. Choose Web if you need sharing, documentation, testing, or access to 500+ addons. Both options can be used together.

Using both React Native and React Native Web in same project

Select the 'Both' option when installing Storybook to install and configure both React Native and React Native Web environments in the same project. React Native Storybook requires additional manual configuration (replacing app entry, wrapping metro config), while React Native Web can be started immediately with the storybook command. Alternatively, install them separately by running the install command and selecting the desired option in the setup wizard.

React Native Web Vite framework requirements

Storybook for React Native Web with Vite requires React Native ≥ 0.72, React Native Web ≥ 0.19, and Vite ≥ 5.

Run Storybook development server for React Native Web

To run Storybook for React Native Web, execute the storybook run dev command in your project's root directory.

Build Storybook for production with React Native Web

To build Storybook for production, run the build-storybook command. The output is placed in the configured outputDir, which defaults to storybook-static.

Migrate from React Native Web addon to framework

The React Native Web addon was a Webpack-based precursor to the React Native Web Vite framework (@storybook/react-native-web-vite). Migrate by: 1) upgrading Storybook to latest version, 2) installing the framework and peer dependencies, 3) updating .storybook/main.js|ts to change the framework property and remove @storybook/addon-react-native-web addon, 4) removing the addon and similar packages (@storybook/react-webpack5 and @storybook/addon-react-native-web) from your project. The framework requires Storybook 8.5 and above.

React Webpack framework builder options

The builder option is of type Record<string, any> and configures options for the framework's builder. For the React Webpack framework, available options can be found in the Webpack builder docs.

Run Storybook dev server

To run Storybook for a project, use the storybook-run-dev command. To build Storybook for production, use build-storybook-production-mode command. The build output is written to the configured outputDir, which defaults to storybook-static.

Disable docgen for build performance

Disabling the docgen option in Svelte Vite framework configuration can improve build performance for large projects. However, disabling docgen prevents automatic argTypes inference, which breaks features like Controls and autodocs. When disabled, argTypes must be defined manually.

Svelte Vite framework options configuration

The Svelte Vite framework accepts an options object with the following configurable properties: builder (Record<string, any>, configures Vite builder options), and docgen (boolean, default true, enables/disables automatic documentation generation for component properties).

Run Storybook development server

To run Storybook for a Svelte Vite project in development mode, use the storybook run dev command.

Mock SvelteKit imports with parameters.sveltekit_experimental

To mock a SvelteKit import, define it within the parameters.sveltekit_experimental namespace in your story configuration. See the sveltekit-mock-features.md code snippet for examples.

Run Storybook dev server for SvelteKit

To run Storybook for SvelteKit, execute the command provided in storybook-run-dev.md.

Build Storybook for SvelteKit production

To build Storybook for production, use the command from build-storybook-production-mode.md. The output is placed in the configured outputDir, which defaults to 'storybook-static'.

SvelteKit $app/environment module support

The $app/environment module is supported in Storybook for SvelteKit. However, the version property is always empty in Storybook.

SvelteKit $app/forms module is experimental

The $app/forms module from SvelteKit is experimentally supported in Storybook. See the 'How to mock' section for details on implementation.

SvelteKit $app/navigation module is experimental

The $app/navigation module from SvelteKit is experimentally supported in Storybook. See the 'How to mock' section for details on implementation.

SvelteKit $app/paths module support

The $app/paths module is supported in Storybook for SvelteKit, but requires SvelteKit 1.4.0 or newer.

SvelteKit $app/state module is experimental

The $app/state module from SvelteKit is experimentally supported in Storybook and requires SvelteKit v2.12 or newer. See the 'How to mock' section for details.

SvelteKit $app/stores module is experimental

The $app/stores module from SvelteKit is experimentally supported in Storybook. See the 'How to mock' section for details on implementation.

SvelteKit $env/dynamic/public module partially supported

The $env/dynamic/public module is only supported in development mode for Storybook. Storybook is built as a static app with no server-side API, so it cannot dynamically serve content.

SvelteKit $env/static/public module support

The $env/static/public module is supported in Storybook for SvelteKit.

SvelteKit $lib module support

The $lib module is supported in Storybook for SvelteKit.

SvelteKit @sveltejs/kit/* modules support

The @sveltejs/kit/* modules are supported in Storybook for SvelteKit.

SvelteKit $env/static/private module not supported

The $env/static/private module is not supported in Storybook because it is a server-side feature and Storybook renders all components on the client.

SvelteKit $service-worker module not supported

The $service-worker module is not supported in Storybook because it is a service worker feature which does not apply to Storybook.

Give your agent this brain