rollup-plugin-svelte-hot

1.0.0-8 verified Mon Apr 27 auth: no javascript

Rollup plugin for compiling Svelte components with built-in Hot Module Replacement (HMR) support. Version 1.0.0-8, pre-release, requires Rollup >= 2.0.0 and Svelte >= 3.5.0. Supports both Rollup and Nollup bundlers. Unlike standard rollup-plugin-svelte, this plugin adds HMR capabilities, making it suitable for development workflows. Maintained by rixo, with TypeScript definitions included. Release cadence is irregular, with multiple alpha/beta tags.

Common errors

error Error: Cannot find module 'svelte/compiler' ↓

cause Missing or mismatched Svelte peer dependency.

fix

Install svelte: npm install --save-dev svelte

error Error: [!] RollupError: Could not resolve 'svelte' ↓

cause Svelte not resolved by plugin.

fix

Add @rollup/plugin-node-resolve with dedupe: ['svelte']

error Module not found: Error: Can't resolve 'svelte' ↓

cause Webpack context in Rollup config.

fix

Use @rollup/plugin-node-resolve, not webpack.

error TypeError: svelte is not a function ↓

cause Using require() in ES module context.

fix

Use import svelte from 'rollup-plugin-svelte-hot'

Warnings

breaking Requires rollup >= 2.0.0 and svelte >= 3.5.0 ↓

fix Upgrade rollup and svelte to meet minimum versions.

deprecated Nollup dependency is optional since v0.14.1; may be removed in future. ↓

fix Explicitly install nollup if using Nollup.

gotcha Ensure 'svelte' is deduplicated in @rollup/plugin-node-resolve to avoid multiple Svelte instances. ↓

fix Add 'dedupe: ['svelte']' to resolve options.

gotcha HMR only works in 'dev' mode; set 'hot' to false or omit in production. ↓

fix Use 'const production = !process.env.ROLLUP_WATCH' and conditionally enable hot.

gotcha CSS output with HMR: writes a blank CSS file; suppresses warning with Nollup. ↓

fix Upgrade to 0.11.2+ or ignore blank CSS file.

Install

npm install rollup-plugin-svelte-hot

yarn add rollup-plugin-svelte-hot

pnpm add rollup-plugin-svelte-hot

Imports

default
wrong
```
const svelte = require('rollup-plugin-svelte-hot')
```
correct
```
import svelte from 'rollup-plugin-svelte-hot'
```
ESM exports default function. CJS require() works in Node.js, but ESM is preferred for bundlers.

svelte

wrong

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

correct

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

Named export 'svelte' is also available, same as default.

hotOptions
```
import { hotOptions } from 'rollup-plugin-svelte-hot'
```
Optional helper for setting HMR options, TypeScript typed.

Quickstart

Minimal Rollup config with svelte-hot, HMR, dev server, and production minification.

import svelte from 'rollup-plugin-svelte-hot';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js'
  },
  plugins: [
    svelte({
      dev: !production,
      css: css => css.write('public/build/bundle.css'),
      hot: production ? false : {}
    }),
    resolve({ browser: true, dedupe: ['svelte'] }),
    commonjs(),
    !production && livereload('public'),
    production && terser()
  ]
};