rollup-plugin-livereload

2.0.5 verified Mon Apr 27 auth: no javascript

A Rollup plugin that integrates LiveReload functionality, automatically reloading the browser when the bundle changes. Currently at version 2.0.5, it supports Node >=8.3 and ships TypeScript definitions. It wraps the `livereload` npm package, allowing configuration of watch directories, port, delay, and HTTPS. Unlike generic watchers, it is tailored for Rollup's build pipeline, pairing well with `rollup-plugin-serve`. The plugin watches the output directory for changes and notifies the browser via WebSocket, eliminating manual refresh during development. It has been stable for several years with low maintenance overhead.

Common errors

error Error: livereload is not a function ↓

cause Importing as a constructor instead of factory function.

fix

Use livereload() instead of new livereload().

error Error: Cannot find module 'rollup-plugin-livereload' ↓

cause Package not installed or missing from node_modules.

fix

Run npm install --save-dev rollup-plugin-livereload.

error Error: EADDRINUSE :::35729 ↓

cause Default port 35729 is already in use by another LiveReload instance.

fix

Specify a different port: livereload({ port: 35730 }).

Warnings

gotcha livereload() does not start a static file server; it only injects a script and reloads. Use rollup-plugin-serve for serving files. ↓

fix Install and add rollup-plugin-serve plugin to your Rollup config.

gotcha When using the `watch` option, the path must be relative to the project root; absolute paths may not work as expected. ↓

fix Use a relative path like 'dist' or './dist' for the watch directory.

deprecated The `https` option accepts an object with `key` and `cert`; using `pfx` or other properties is not supported and may be removed. ↓

fix Pass only `{ key: ..., cert: ... }` for HTTPS.

Install

npm install rollup-plugin-livereload

yarn add rollup-plugin-livereload

pnpm add rollup-plugin-livereload

Imports

default (livereload function)

wrong

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

correct

import livereload from 'rollup-plugin-livereload'

ESM default import; CommonJS require works but is not idiomatic.

livereload
wrong
```
plugins: [new livereload()]
```
correct
```
export default { plugins: [livereload()] }
```
livereload is a factory function, not a constructor.
livereload with options
wrong
```
livereload('dist', { delay: 300 })
```
correct
```
livereload({ watch: 'dist', delay: 300 })
```
Pass directory as first argument OR inside options object, not both.

Quickstart

Configures rollup-plugin-serve and rollup-plugin-livereload together for a full dev server with auto-reload.

import livereload from 'rollup-plugin-livereload';
import serve from 'rollup-plugin-serve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    serve('dist'),
    livereload({ watch: 'dist', verbose: false })
  ]
};