rollup-plugin-visualizer

7.0.1 verified Mon Apr 27 auth: no javascript

rollup-plugin-visualizer v7.0.1 is a Rollup plugin that generates interactive visualizations (treemap, sunburst, network, raw-data) to analyze bundle composition and module size distribution. Requires Node >=22 and supports Rollup 2-4 and Rolldown 1.x. Unlike bundle-size analysis tools, it offers multiple visualization types and works at build time. Actively maintained with frequent releases.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module not supported ↓

cause Using CommonJS require() to import an ESM-only package

fix

Switch to import syntax or use dynamic import: const visualizer = (await import('rollup-plugin-visualizer')).visualizer;

error TypeError: visualizer is not a function ↓

cause Default import used but package exports named export; or wrong import path

fix

Use named import: import { visualizer } from 'rollup-plugin-visualizer'

error Error: Package 'rollup' must be installed to use this plugin ↓

cause Missing peer dependency

fix

Install rollup: npm install rollup

error Error: Template 'circlepacking' is not available. Available templates: treemap, sunburst, network, raw-data ↓

cause Misspelled or unsupported template name

fix

Use one of the supported templates: treemap, sunburst, network, raw-data

Warnings

breaking ESM-only: This package requires Node >=22 and does not support CommonJS require() ↓

fix Use import syntax and ensure project is configured for ESM (e.g., 'type': 'module' in package.json)

breaking Peer dependency rollup updated to require Rollup 2.x, 3.x, or 4.x only ↓

fix Update rollup to version 2, 3, or 4, or use an older version of the plugin

breaking Plugin option 'open' default changed from false to true in v5 ↓

fix Explicitly set { open: false } if you do not want the browser to open automatically

deprecated The option 'treeshake' is deprecated and will be removed in a future version ↓

fix Use the 'sourcemap' option instead or configure Rollup's treeshaking directly

gotcha Plugin must be applied after other plugins that modify the bundle (e.g., terser), otherwise sizes may be inaccurate ↓

fix Place visualizer last in the plugins array to capture final bundle sizes

Install

npm install rollup-plugin-visualizer

yarn add rollup-plugin-visualizer

pnpm add rollup-plugin-visualizer

Imports

visualizer

wrong

const visualizer = require('rollup-plugin-visualizer')

correct

import { visualizer } from 'rollup-plugin-visualizer'

ESM-only since v6; CommonJS require will fail. TypeScript types included.

PluginVisualizerOptions

wrong

import { PluginVisualizerOptions } from 'rollup-plugin-visualizer'

correct

import type { PluginVisualizerOptions } from 'rollup-plugin-visualizer'

Type export; use import type to avoid runtime inclusion.

default (deprecated)

wrong

const visualizer = require('rollup-plugin-visualizer')

correct

import visualizer from 'rollup-plugin-visualizer'

Default import works, but named import is preferred and more explicit.

Quickstart

Rollup config with visualizer plugin generating treemap HTML report with gzip/brotli sizes.

// rollup.config.js
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  input: 'src/index.js',
  output: { dir: 'dist', format: 'esm' },
  plugins: [
    visualizer({
      filename: 'stats.html',
      title: 'Bundle Analysis',
      open: true,
      template: 'treemap',
      gzipSize: true,
      brotliSize: true,
      sourcemap: false
    })
  ]
};