vite-plugin-turbosnap

1.0.3 verified Sat Apr 25 auth: no javascript

vite-plugin-turbosnap v1.0.3 generates a preview-stats.json file from Vite Storybook projects for Chromatic's Turbosnap feature, which limits snapshot runs to only changed stories. It works by constructing a dependency graph during Vite builds, mimicking webpack stats output for Chromatic CLI. Requires chromatic-cli >=6.5.0, Storybook >=7.0 (or 6.5 with @storybook/builder-vite >=0.1.22). Experimental; may not support all configurations.

Common errors

error Error: The plugin 'vite-plugin-turbosnap' doesn't have the expected shape. Did you forget to call it? ↓

cause Importing the plugin default incorrectly or not calling the function.

fix

Ensure the import is correct: import turbosnap from 'vite-plugin-turbosnap'; then use turbosnap({...}) in the plugins array.

error Error: Cannot find module 'vite-plugin-turbosnap' ↓

cause Package not installed or module resolution fails.

fix

Run npm install --save-dev vite-plugin-turbosnap and ensure node_modules path is correct.

Warnings

gotcha Plugin must only be added in PRODUCTION mode, not during development. ↓

fix Conditionally apply plugin only when configType === 'PRODUCTION' as shown in the quickstart.

gotcha rootDir must point to the project root; in monorepos, process.cwd() may not be sufficient. ↓

fix Set rootDir to the monorepo package root, e.g., path.resolve(__dirname, '..').

gotcha The generated preview-stats.json is only produced during build-storybook, not dev. ↓

fix Run build-storybook to generate the file for Chromatic.

Install

npm install vite-plugin-turbosnap

yarn add vite-plugin-turbosnap

pnpm add vite-plugin-turbosnap

Imports

default
```
import turbosnap from 'vite-plugin-turbosnap'
```
Default export is a function that returns a Vite plugin. No named exports.

Quickstart

Basic setup to add the turbosnap plugin only during production builds in Storybook's viteFinal config.

// .storybook/main.js
import turbosnap from 'vite-plugin-turbosnap';
import { mergeConfig } from 'vite';

export default {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  framework: '@storybook/react-vite',
  async viteFinal(config, { configType }) {
    return mergeConfig(config, {
      plugins:
        configType === 'PRODUCTION'
          ? [
              turbosnap({
                rootDir: config.root ?? process.cwd(),
              }),
            ]
          : [],
    });
  },
};