rollup-plugin-dependency-flow

0.3.0 verified Mon Apr 27 auth: no javascript

A Rollup plugin (v0.3.0) for visualizing module dependency graphs as interactive HTML or live webserver. Generates static HTML files or serves a real-time updated graph during watch mode. Lightweight, no external UI dependencies, configurable output and ports.

Common errors

error Error: Cannot find module 'rollup-plugin-dependency-flow' ↓

cause Package not installed or typo in package name.

fix

Run npm install rollup-plugin-dependency-flow

error TypeError: deps is not a function ↓

cause Incorrect import – destructured named export instead of default.

fix

Use import deps from 'rollup-plugin-dependency-flow' (without braces).

Warnings

gotcha Calling deps() without arguments uses default build config, not server mode. To start a server, pass serve config explicitly. ↓

fix Use deps(false, { port: 8085 }) to enable serve mode.

deprecated CommonJS require pattern may not be supported in future versions; prefer ESM imports. ↓

fix Switch to import deps from 'rollup-plugin-dependency-flow'.

Install

npm install rollup-plugin-dependency-flow

yarn add rollup-plugin-dependency-flow

pnpm add rollup-plugin-dependency-flow

Imports

default

wrong

const deps = require('rollup-plugin-dependency-flow')

correct

import deps from 'rollup-plugin-dependency-flow'

Default export. Use ESM import for modern bundlers.

default as named

wrong

import { deps } from 'rollup-plugin-dependency-flow'

correct

import deps from 'rollup-plugin-dependency-flow'

Do not destructure – the default export is the function.

require

wrong

const deps = require('rollup-plugin-dependency-flow').default

correct

const deps = require('rollup-plugin-dependency-flow')

CJS require works fine; no .default needed.

Quickstart

Generates a static HTML file visualizing Rollup module dependencies.

// rollup.config.js
import deps from 'rollup-plugin-dependency-flow';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'esm'
  },
  plugins: [
    deps({
      build: {
        dir: './dependency-visualization',
        name: 'dep-graph.html'
      }
    })
  ]
};