rollup-plugin-hot

0.1.1 verified Mon Apr 27 auth: no javascript

HMR (Hot Module Replacement) plugin for Rollup, leveraging SystemJS. Current stable version 0.1.1, released in Aug 2020. This is a proof-of-concept, not production-ready. It forces output format to 'system' during HMR and provides a dev server with proxy support. Key differentiator: it enables live reload and stateful HMR for Rollup-built apps, using SystemJS for module loading. However, it has limited maintenance and lacks support for Rollup 3+.

Common errors

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

cause Package not installed or incorrect import path.

fix

Run: npm install --save-dev rollup-plugin-hot

error TypeError: hmr is not a function ↓

cause Using destructured import with named export instead of default import.

fix

Change to: import hmr from 'rollup-plugin-hot'

error Error: This plugin only works with rollup >=1.24.0 <3 ↓

cause Using incompatible Rollup version (3+).

fix

Downgrade Rollup to version 2.x.

error Module format 'system' is not supported by Rollup for this output type. ↓

cause HMR forces 'system' format, which may conflict with other output options like 'dir' or 'file'.

fix

Ensure output.dir or output.file is set; consider using single bundle output format.

Warnings

gotcha Output format is overridden to 'system' when HMR is running, regardless of what is set in config. ↓

fix Do not rely on output format during development; use format: 'iife' only for production builds without HMR.

breaking Peer dependency rollup >=1.24.0 <3 – incompatible with Rollup 3+. ↓

fix Use Rollup 2.x or find alternative HMR plugin for Rollup 3+.

gotcha The plugin is a proof of concept and not production-ready; may exhibit unexpected behavior with other plugins. ↓

fix Test thoroughly before using in production; consider alternatives like @rollup/plugin-replace or webpack for stable HMR.

deprecated The option 'randomPortFallback' defaults to true; may cause port conflicts if not set explicitly. ↓

fix Set randomPortFallback: false if you need a deterministic port.

gotcha Files without a URL (e.g., non-JS) are not handled by HMR and can cause errors. ↓

fix Ensure all HMR-accepting modules have proper URLs; rely on full-page reload for other files.

Install

npm install rollup-plugin-hot

yarn add rollup-plugin-hot

pnpm add rollup-plugin-hot

Imports

default (hmr function)
wrong
```
const { hmr } = require('rollup-plugin-hot')
```
correct
```
import hmr from 'rollup-plugin-hot'
```
Package exports a single default function. CommonJS destructuring will return undefined.

Rollup config usage

wrong

import { hot } from 'rollup-plugin-hot'

correct

import hmr from 'rollup-plugin-hot'; export default { plugins: [hmr({ enabled: true })] }

Named export does not exist.

TypeScript integration

wrong

import hmr from 'rollup-plugin-hot'; // no types

correct

// @ts-ignore
import hmr from 'rollup-plugin-hot'

Package lacks TypeScript definitions; use @ts-ignore or declare module.

Quickstart

Basic Rollup configuration with rollup-plugin-hot. Sets up HMR dev server on port 33440, watches for changes, and opens browser.

import hmr from 'rollup-plugin-hot';

export default {
  input: 'src/main.js',
  output: {
    dir: 'public',
    format: 'iife',
    sourcemap: true,
  },
  plugins: [
    hmr({
      enabled: true,
      public: 'public',
      baseUrl: '/',
      port: 33440,
      open: 'default',
      openPage: '/',
    }),
  ],
};

// Run rollup --watch to enable HMR