rollup-plugin-watch-assets

1.0.1 verified Mon Apr 27 auth: no javascript

A dead-simple Rollup plugin (v1.0.1, last updated 2022) that adds non-JS assets like HTML and CSS to Rollup's file watcher. Useful alongside copy plugins to trigger rebuilds when static files change. Accepts an array of filenames or globs. Lightweight alternative to manual watcher configuration or complex tooling. No dependencies beyond Rollup.

Common errors

error TypeError: watchAssets is not a function ↓

cause Named import instead of default import.

fix

Use import watchAssets from 'rollup-plugin-watch-assets' (no curly braces).

error Error: Could not resolve 'rollup-plugin-watch-assets' ↓

cause Package not installed or not in node_modules.

fix

Run npm install rollup-plugin-watch-assets --save-dev

error Assets not triggering rebuild in watch mode ↓

cause Plugin misconfigured or globs don't match existing files.

fix

Verify assets array contains valid globs (e.g., 'src/**/*.html') and files exist. Run rollup with --watch.

Warnings

gotcha Assets not triggering rebuilds if not already watched by Rollup (e.g., not imported). Plugin only adds to watcher; requires watch mode. ↓

fix Ensure Rollup runs in watch mode (--watch flag). Also verify glob patterns match existing files.

gotcha Glob patterns relative to CWD, not relative to rollup.config.js. Misleading if config is in subdirectory. ↓

fix Use absolute paths or resolve from project root: `path.resolve('src/...')`.

gotcha Only supports Rollup v2+; not tested with v3 or v4. API changes may break. ↓

fix Check compatibility; upgrade may require plugin rewrite.

Install

npm install rollup-plugin-watch-assets

yarn add rollup-plugin-watch-assets

pnpm add rollup-plugin-watch-assets

Imports

default

wrong

const { watchAssets } = require('rollup-plugin-watch-assets')

correct

import watchAssets from 'rollup-plugin-watch-assets'

Default export only; named import will be undefined.

watchAssets

wrong

import { watchAssets } from 'rollup-plugin-watch-assets'

correct

import watchAssets from 'rollup-plugin-watch-assets'

Not a named export; use default import.

require

wrong

const { watchAssets } = require('rollup-plugin-watch-assets')

correct

const watchAssets = require('rollup-plugin-watch-assets')

CommonJS works, but destructuring the named export fails.

Quickstart

Basic setup: import plugin, add to plugins array, specify asset paths/globs to watch.

import watchAssets from 'rollup-plugin-watch-assets';

export default {
  input: 'src/index.js',
  output: {
    dir: 'build',
    format: 'es'
  },
  plugins: [
    watchAssets({ assets: ['src/index.html', 'src/styles/*.css'] })
  ]
};