builder & framework configuration

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Default image extensions in vite-plugin-storybook-nextjs

If you do not customize image.include, the plugin defaults to common image extensions: **/*.{png,jpg,jpeg,gif,webp,avif,ico,bmp,svg}.

vite-plugin-storybook-nextjs purpose and requirements

The vite-plugin-storybook-nextjs is a Vite plugin that allows you to use Next.js features in Vite. It is the basis for @storybook/nextjs-vite and should be used when running portable stories in Vitest. Requirements are Next.js v14.1.0 or higher and Storybook 10 or higher.

Add vite-plugin-storybook-nextjs to Vitest configuration

Add the plugin to your vitest.config.ts file by importing defineConfig from vite and nextjs from vite-plugin-storybook-nextjs, then export a config with plugins: [nextjs()].

Use @storybook/nextjs-vite re-export in Vitest config

If using @storybook/nextjs-vite, you don't need to separately install vite-plugin-storybook-nextjs. Instead, import storybookNextJsPlugin from @storybook/nextjs-vite/vite-plugin and add it to your Vitest config plugins array.

VitePluginOptions configuration type

The plugin accepts VitePluginOptions with two properties: dir (string, default: process.cwd()) to provide the path to your Next.js project directory, and image (object with include and exclude FilterPattern properties) to control which image files are handled by the Next Image plugin.

FilterPattern type definition

FilterPattern is defined as ReadonlyArray<string | RegExp> | string | RegExp | null and follows Rollup's FilterPattern semantics (micromatch).

Configure image handling with vite-plugin-svgr

When using vite-plugin-svgr, configure the plugin's image option to exclude **/*.svg?react so that SVGR handles SVG imports with the ?react query while the Next Image plugin handles other images. For Storybook, set this in .storybook/main.ts under framework.options.image.exclude. For non-Storybook usage, set it in vite.config.ts or vitest.config.ts in the plugin options.

Next.js Server Actions require jsdom environment in Vitest

When testing components that rely on Next.js Server Actions, story files must use the jsdom environment in Vitest. This can be done by adding // @vitest-environment jsdom at the top of individual story files, or by setting test.environment: jsdom in vitest.config.ts to apply it to all tests.

SWC mode requirement for vite-plugin-storybook-nextjs

Only Next.js in SWC mode is supported. If your project was forced to opt out of Babel, you will very likely encounter issues with this plugin. For example, Emotion support in SWC is still lagging behind Babel.

next/font staticDir mapping not needed with Vite

You don't need to map your custom font directory in Storybook's staticDir configuration when using the Vite-based Next.js integration. Instead, Vite will automatically serve the files in the public directory and provide assets during production builds.

Portable stories use case for vite-plugin-storybook-nextjs

The plugin is necessary to run portable stories in Vitest, as it provides the necessary Next.js features to ensure that your components are tested in an environment that closely mirrors production.

Vite config usage in Storybook

Storybook will read your vite.config.js file, though it may change some options to work correctly. The builder looks for the Vite config in the current working directory.

viteConfigPath builder option

If your Vite config is located elsewhere than the CWD, specify the path using the `viteConfigPath` builder option in .storybook/main.js under the framework options.

viteConfigPath configuration example

```javascript // .storybook/main.mjs const config = { framework: { name: '@storybook/react-vite', options: { builder: { viteConfigPath: '.storybook/customViteConfig.js', }, }, }, }; export default config; ```

viteFinal function to customize Vite config

Use the `viteFinal` function in .storybook/main.js to override the merged Vite config. The function receives the merged config and a configType parameter ('DEVELOPMENT' or 'PRODUCTION'). Use `mergeConfig` from vite to recursively merge options. The function must return the updated Vite configuration.

viteFinal customization example

```javascript import { mergeConfig } from 'vite'; const config = { async viteFinal(config, { configType }) { return mergeConfig(config, { resolve: { alias: { foo: 'bar' }, }, }); }, }; export default config; ```

TypeScript configuration for Vite builder

Configure .storybook/main.ts to use TypeScript by importing StorybookConfig from your framework (e.g., '@storybook/react-vite') and typing the config variable with it.

React Docgen configuration

React docgen is configurable via the `typescript.reactDocgen` setting in .storybook/main.js. Docgen is used to populate the props table in docs view, the controls panel, and other addons. It is supported in Svelte, Vue 3, and React.

React Docgen setting example

```javascript export default { typescript: { reactDocgen: 'react-docgen' } } ```

Vite builder working directory security

The builder enables Vite's server.fs.strict option by default for increased security. The default project root is set to the parent directory of the Storybook configuration directory. This can be overridden in viteFinal.

Give your agent this brain