Storybook Dep Webpack Plugin

1.0.7 verified Sat Apr 25 auth: no javascript

A webpack plugin (v1.0.7) that collects dependency data from Storybook stories for use with storybook-addon-deps. Designed to work exclusively with Storybook's webpack configuration, it allows filtering on stories, excluding modules, controlling depth of dependency resolution, and picking specific module properties. Maintained as an accessory to the addon ecosystem. No active release cadence observed.

Common errors

error Error: Cannot find module 'storybook-dep-webpack-plugin' ↓

cause Package not installed.

fix

npm install --save-dev storybook-dep-webpack-plugin

error TypeError: DependenciesPlugin is not a constructor ↓

cause Using destructured import from require.

fix

const DependenciesPlugin = require('storybook-dep-webpack-plugin');

Warnings

gotcha Requires companion storybook-addon-deps addon to be installed and configured. ↓

fix Add 'storybook-addon-deps' to your Storybook addons and configure panel.

gotcha Only works with Storybook's webpack build; incompatible with other build tools. ↓

fix Ensure your project uses Storybook with webpack (default).

gotcha Plugin modifies default webpack stats, potentially affecting other plugins. ↓

fix Test other plugins after adding; order may matter.

Install

npm install storybook-dep-webpack-plugin

yarn add storybook-dep-webpack-plugin

pnpm add storybook-dep-webpack-plugin

Imports

DependenciesPlugin

wrong

import DependenciesPlugin from 'storybook-dep-webpack-plugin';

correct

const DependenciesPlugin = require('storybook-dep-webpack-plugin');

CommonJS only; no default ESM export provided.

DependenciesPlugin
wrong
```
new DependenciesPlugin({})
```
correct
```
new DependenciesPlugin()
```
CommonJS default import; constructor optionally accepts options object.

DependenciesPlugin

wrong

const { DependenciesPlugin } = require('storybook-dep-webpack-plugin');

correct

const DependenciesPlugin = require('storybook-dep-webpack-plugin');

Package exports a single constructor as default; named destructuring fails.

Quickstart

Registers DependenciesPlugin in Storybook main.js using webpack config function.

const DependenciesPlugin = require('storybook-dep-webpack-plugin');

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  webpack: async (config) => ({
    ...config,
    plugins: [
      ...config.plugins,
      new DependenciesPlugin({ filter: /.*/ })
    ]
  }),
};