eleventy-plugin-rollup

1.3.0 verified Mon Apr 27 auth: no javascript

An Eleventy plugin that integrates Rollup into the build pipeline, enabling per-page JavaScript bundling and code splitting. Version 1.3.0 is the current stable release, updated as needed. Unlike running Rollup separately, this plugin shares the Eleventy build context, reducing duplicate bundles and allowing shared modules across pages. It supports both explicit Rollup configuration via options or an external config file, and provides a Liquid/Nunjucks shortcode for including bundled scripts. Notable alternatives like eleventy-plugin-esbuild or manual PostCSS/Webpack setups require more manual wiring. Requires Rollup as a peer dependency; supports Eleventy 1.x and 2.x.

Common errors

error Error: The rollupOptions property is required. ↓

cause Missing or empty rollupOptions in plugin configuration.

fix

Add rollupOptions object with valid Rollup config (e.g., { output: { format: 'es', dir: '_site/js' } }).

error rollup is not defined (shortcode error) ↓

cause Using the shortcode without adding the plugin or misspelling the shortcode name.

fix

Ensure eleventyConfig.addPlugin(rollupPlugin, ...) is called and the shortcode matches (default: 'rollup').

error TypeError: Cannot read properties of undefined (reading 'output') ↓

cause rollupOptions does not contain output.dir or output.file.

fix

Add output configuration: { output: { dir: '_site/js', format: 'es' } }.

Warnings

breaking Breaking: rollupOptions no longer accepts output.format as 'iife' when used with multiple entry points; use 'es' or 'system'. ↓

fix Set output.format to 'es' or 'system' in rollupOptions.output.

deprecated rollupOptions as a path string to a config file is deprecated; prefer passing options object directly ↓

fix Replace rollupOptions: 'rollup.config.js' with rollupOptions: require('./rollup.config.js') or inline the options.

gotcha Shortcode uses require() internally; do not import rollup plugins that are ESM-only in the shortcode context ↓

fix Use CommonJS-compatible Rollup plugins or ensure your config file is transpiled/required correctly.

gotcha If you use useAbsoluteScriptPaths: true, you must set importScriptsAbsoluteFrom to match your deployment path (defaults to eleventyConfig.dir.output) ↓

fix Set importScriptsAbsoluteFrom to the absolute base URL path (e.g., '/subdir/') in the plugin options.

Install

npm install eleventy-plugin-rollup

yarn add eleventy-plugin-rollup

pnpm add eleventy-plugin-rollup

Imports

default
wrong
```
import rollupPlugin from 'eleventy-plugin-rollup';
```
correct
```
const rollupPlugin = require('eleventy-plugin-rollup');
```
Package does not provide a named export; use default CommonJS require. ESM import may require .default.

rollupPlugin

wrong

eleventyConfig.addPlugin(rollupPlugin.default, ...);

correct

eleventyConfig.addPlugin(rollupPlugin, { rollupOptions: { /* ... */ } });

If using ESM import, the default is wrapped; avoid .default chain. Use require for simplicity.

shortcode
wrong
```
{% rollup "assets/js/main.js" | url %} with no shortcode
```
correct
```
{% rollup "assets/js/main.js" %}
```
The shortcode defaults to 'rollup' and expects a relative path. Use the | url filter only if your template engine requires it (e.g., Liquid).

Quickstart

Shows how to add the plugin with explicit Rollup options in an Eleventy config file.

// .eleventy.js
const rollupPlugin = require('eleventy-plugin-rollup');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(rollupPlugin, {
    rollupOptions: {
      output: {
        format: 'es',
        dir: '_site/js',
      },
    },
  });

  // ... other config
};