or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-storybook--preset-create-react-app

Storybook preset for seamless integration with Create React App projects

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@storybook/preset-create-react-app@9.1.x

To install, run

npx @tessl/cli install tessl/npm-storybook--preset-create-react-app@9.1.0

index.mddocs/

Storybook Preset for Create React App

The @storybook/preset-create-react-app package provides a Storybook preset that enables seamless integration with Create React App (CRA) projects. It automatically configures Webpack and Babel settings to match the host CRA application's build configuration, ensuring consistent behavior between the main app and Storybook environment.

Package Information

  • Package Name: @storybook/preset-create-react-app
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install -D @storybook/preset-create-react-app

Core Imports

This preset is typically configured in Storybook's main configuration file and does not export user-facing functions for direct import. The preset works automatically when added to your Storybook configuration.

Note: This preset does not export functions for direct use. It works as a Storybook addon/preset that modifies webpack configuration automatically.

Basic Usage

The simplest way to use this preset is by adding it to your Storybook configuration:

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-essentials',
  ],
};

For advanced customization with options:

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    {
      name: '@storybook/preset-create-react-app',
      options: {
        scriptsPackageName: '@my/react-scripts',
        craOverrides: {
          fileLoaderExcludes: ['pdf'],
        },
      },
    },
    '@storybook/addon-essentials',
  ],
};

Capabilities

Core Configuration

The preset provides core Storybook configuration that disables default webpack settings to allow full CRA integration. This is handled internally by the preset.

/**
 * Internal core configuration - automatically applied by the preset
 * Disables Storybook's default webpack configuration to prevent conflicts with CRA
 */
interface CoreConfiguration {
  disableWebpackDefaults: true;
}

Webpack Configuration

The preset automatically merges CRA and Storybook webpack configurations. This processing is handled internally by the preset when it's loaded.

/**
 * Internal webpack configuration processing - automatically applied by the preset
 * Merges CRA's webpack configuration with Storybook's configuration
 */
interface WebpackProcessing {
  // Automatically processes and merges:
  // - JavaScript/TypeScript compilation rules
  // - CSS processing rules
  // - Asset handling rules
  // - Plugin merging with conflict resolution
  // - Module resolution paths
}

Plugin Options Configuration

Configuration interface for customizing the preset behavior.

// Plugin configuration options interface
interface PluginOptions {
  configDir: string;
  packageJson?: { version?: string };
  presets: {
    apply: (key: string) => Promise<any>;
  };
  presetsList?: Array<string | { name: string }>;
  
  /**
   * Optionally set the package name of a react-scripts fork. In most cases, the package is located
   * automatically by this preset.
   */
  scriptsPackageName?: string;

  /** Overrides for Create React App's Webpack configuration. */
  craOverrides?: {
    fileLoaderExcludes?: string[];
  };

  typescriptOptions?: {
    reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false;
    reactDocgenTypescriptOptions: RDTSPluginOptions;
  };
}

// Type definitions for react-docgen-typescript plugin options
interface RDTSPluginOptions {
  [key: string]: any;
}

Internal Processing

The preset includes several internal capabilities that work automatically:

  • Preset Compatibility Checking: Automatically validates compatibility with other presets and warns about potential conflicts
  • CRA Configuration Processing: Intelligently processes Create React App's webpack configuration for Storybook compatibility
  • Plugin Merging: Merges webpack plugins while avoiding duplicates and handling special cases like React Refresh
  • Module Path Resolution: Extracts module resolution paths from TypeScript/JavaScript config files (tsconfig.json/jsconfig.json)
  • React Scripts Detection: Automatically locates react-scripts package installation path, including support for custom forks

Configuration Examples

Basic Storybook Integration

// .storybook/main.js
module.exports = {
  addons: ['@storybook/preset-create-react-app'],
};

With Complete Addon Configuration

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-links',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
};

Custom react-scripts Package

// .storybook/main.js - For projects using forked react-scripts
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    {
      name: '@storybook/preset-create-react-app',
      options: {
        scriptsPackageName: '@my/react-scripts', // Custom react-scripts fork
      },
    },
    '@storybook/addon-essentials',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
};

File Loader Overrides

// .storybook/main.js - Exclude additional file types from asset processing
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    {
      name: '@storybook/preset-create-react-app',
      options: {
        craOverrides: {
          fileLoaderExcludes: ['pdf', 'doc', 'docx', 'zip'], // Additional exclusions
        },
      },
    },
    '@storybook/addon-essentials',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
};

Complete Configuration with TypeScript Options

// .storybook/main.js - Full configuration example
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    {
      name: '@storybook/preset-create-react-app',
      options: {
        scriptsPackageName: 'react-scripts', // Can be customized for forks
        craOverrides: {
          fileLoaderExcludes: ['pdf', 'doc'], // Additional file exclusions
        },
        typescriptOptions: {
          reactDocgen: 'react-docgen-typescript',
          reactDocgenTypescriptOptions: {
            shouldExtractLiteralValuesFromEnum: true,
            propFilter: (prop) => {
              if (prop.parent) {
                return !prop.parent.fileName.includes('node_modules');
              }
              return true;
            },
          },
        },
      },
    },
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => {
        if (prop.parent) {
          return !prop.parent.fileName.includes('node_modules');
        }
        return true;
      },
    },
  },
};

Error Handling

The preset includes built-in error handling for common scenarios:

  • Missing react-scripts: Logs error and returns unmodified webpack config
  • Invalid scriptsPackageName: Logs warning and falls back to automatic detection
  • Missing CRA webpack rules: Returns empty rules array safely
  • File system access errors: Handles missing config files gracefully
  • Plugin conflicts: Automatically detects and resolves webpack plugin conflicts
  • Babel configuration merging: Safely merges CRA and Storybook Babel configurations

Compatibility

  • Create React App: Version 5.0.0 and later (supports react-scripts forks)
  • Storybook: Compatible with Storybook 5.3.0+ (optimized behavior for 6.0+)
  • React: Compatible with React 16.8+ and React 18
  • TypeScript: Full TypeScript support with automatic detection
  • Node.js: Supports Node.js 16+ with both CommonJS and ES modules
  • Platforms: Cross-platform support including Windows, macOS, and Linux
  • Package Managers: Works with npm, yarn, and pnpm