rollup-route-manifest

1.0.0 verified Mon Apr 27 auth: no javascript

Rollup plugin (v1.0.0, stable, low release cadence) that generates an asset manifest keyed by route patterns, enabling proactive prefetching/preloading of code-split chunks. Unlike generic manifest plugins, this maps output filenames to URL route patterns via a user-defined function or dictionary, giving control over commons grouping and route-specific asset lists. Ships TypeScript types, requires Rollup >=2.0.0.

Common errors

error TypeError: Manifest is not a function ↓

cause Default import used with CommonJS requiring esModuleInterop.

fix

Use const Manifest = require('rollup-route-manifest').default; or enable esModuleInterop in tsconfig.

error Error: [rollup-route-manifest] The `routes` option is required. ↓

cause Missing `routes` option in plugin config.

fix

Add a routes function or object to the plugin options.

error TypeError: Cannot read property 'includes' of undefined ↓

cause Inside the `routes` function, the file argument is undefined because the plugin cannot retrieve the module's absolute path.

fix

Ensure Rollup's preserveModules or similar options are not interfering; provide absolute paths correctly.

Warnings

breaking The `routes` option is required and must be a function or an object with absolute paths as keys. If missing, the plugin throws an error. ↓

fix Always provide a `routes` option as described in the docs.

gotcha When using the object form of `routes`, keys must be absolute file paths exactly as resolved by Rollup (including platform-specific separators). ↓

fix Use `path.resolve` to generate the keys or extract absolute paths from Rollup's module resolution.

gotcha Returning `false` from the `routes` function does NOT prevent the chunk from being emitted; it only omits it from the manifest. The chunk will still appear in the bundle output. ↓

fix If you want to exclude a chunk entirely, use Rollup's `inlineDynamicImports` or other mechanisms.

gotcha The manifest output file is written to the Rollup output directory as `route-manifest.json` by default. Ensure the output directory is writable and not already containing that file unless you want it overwritten. ↓

fix Use the `name` option to customize the manifest filename if needed.

Install

npm install rollup-route-manifest

yarn add rollup-route-manifest

pnpm add rollup-route-manifest

Imports

Manifest
wrong
```
const Manifest = require('rollup-route-manifest')
```
correct
```
import Manifest from 'rollup-route-manifest'
```
ESM default export. CommonJS require works but TypeScript users may need esModuleInterop.

Manifest (as type)

wrong

import { ManifestOptions } from 'rollup-route-manifest'

correct

import type { RollupRouteManifestOptions } from 'rollup-route-manifest'

Type exports are behind the default export; no named type exported directly.

routes function
wrong
```
Manifest({ routes: {} }) without proper absolute paths
```
correct
```
Manifest({ routes: (file) => { /* ... */ } })
```
The `routes` option can be a function or an object. If object, keys must be absolute file paths.

Quickstart

Shows how to configure the plugin in a Rollup config, mapping absolute file paths to route patterns with the required 'routes' function.

// rollup.config.js
import Manifest from 'rollup-route-manifest';

export default {
  input: 'src/index.js',
  output: { dir: 'dist', format: 'esm', entryFileNames: '[name]-[hash].js', chunkFileNames: '[name]-[hash].js' },
  plugins: [
    Manifest({
      // Map absolute file paths to route patterns
      routes(file) {
        // Example: group all non-page chunks as commons
        if (!file.includes('/pages/')) return '*'; // commons
        // Derive route from path
        let name = file.replace('/Users/me/myapp/src', '').replace(/\.js$/, '');
        if (name === '/pages/home') return '/';
        if (name === '/pages/about') return '/about';
        if (name === '/pages/blog/[slug]') return '/blog/:slug';
        // Ignore error page
        if (name === '/pages/error') return false;
        // Default: use file path as route
        return name;
      },
      merge: true,
      minify: true
    })
  ]
};