rollup-plugin-auto-reload

1.2.1 verified Mon Apr 27 auth: no javascript

Rollup plugin that automatically reloads the browser when watch mode detects changes to bundles. Current stable version is 1.2.1, with slow release cadence. Supports Rollup 3.x and 4.x, requires Node >= 18. It injects a small client-side script to trigger full page reloads, works with any server or file:// protocol. Differentiates from similar plugins (e.g., rollup-plugin-livereload) by its simplicity and zero external WebSocket dependencies in older versions.

Common errors

error Error: Cannot find module 'rollup-plugin-auto-reload' ↓

cause Package not installed or installed in wrong location.

fix

Run npm install --save-dev rollup-plugin-auto-reload in the project root.

error TypeError: autoReload is not a function ↓

cause Trying to use default import instead of named import.

fix

Change import autoReload from 'rollup-plugin-auto-reload' to import { autoReload } from 'rollup-plugin-auto-reload'.

error Error: The plugin is not compatible with rollup version 2 ↓

cause Using rollup-plugin-auto-reload 1.x with Rollup 2.x.

fix

Upgrade Rollup to version 3 or 4, or downgrade the plugin to 0.x.

Warnings

breaking Version 1.x drops support for Rollup 2.x; only Rollup ^3.18.0 || ^4.0.0 is supported. ↓

fix Upgrade Rollup to ^3.18.0 or ^4.0.0, or stay on rollup-plugin-auto-reload 0.x.

gotcha The plugin only works in watch mode. It does nothing in non-watch builds. ↓

fix Use Rollup's --watch flag or add watch option in config.

gotcha If port is set to 0 (default), a random available port is used. The client must connect to that exact port. ↓

fix Specify a fixed port in options to avoid confusion, especially in production-like setups.

deprecated The plugin's official GitHub repo is archived; no further updates expected. ↓

fix Consider migrating to rollup-plugin-livereload or @rollup/plugin-livereload.

Install

npm install rollup-plugin-auto-reload

yarn add rollup-plugin-auto-reload

pnpm add rollup-plugin-auto-reload

Imports

autoReload

wrong

const autoReload = require('rollup-plugin-auto-reload')

correct

import { autoReload } from 'rollup-plugin-auto-reload'

Named export only; package is ESM-only.

Plugin

wrong

import { Plugin } from 'rollup-plugin-auto-reload'

correct

import type { Plugin } from 'rollup'

Plugin type is from Rollup, not this package.

Quickstart

Basic Rollup config using autoReload plugin in watch mode to trigger browser refresh.

import { autoReload } from 'rollup-plugin-auto-reload';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'iife'
  },
  plugins: [
    autoReload({ port: 35729 })
  ]
};