rollup-plugin-svelte

7.2.3 verified Mon Apr 27 auth: no javascript

Compile Svelte components with Rollup. Version 7.2.3 requires Rollup >=2.0.0 and Svelte >=3.5.0. This plugin translates .svelte files into JavaScript and CSS, and must be used alongside @rollup/plugin-node-resolve and typically @rollup/plugin-commonjs. Key features include preprocessing support, SSR compilation (generate: 'ssr'), custom element output, and flexible include/exclude filtering. The package ships TypeScript types. For new projects, the maintainers recommend using SvelteKit or Vite with vite-plugin-svelte instead.

Common errors

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

cause Package not installed or not in node_modules.

fix

Run 'npm install --save-dev rollup-plugin-svelte'.

error Error: 'svelte' is not exported by node_modules/rollup-plugin-svelte/index.mjs ↓

cause Using named import instead of default import.

fix

Use 'import svelte from 'rollup-plugin-svelte'' instead of 'import { svelte } from ...'.

error Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) ↓

cause Rollup cannot parse .svelte files without this plugin.

fix

Add rollup-plugin-svelte to your plugins list in rollup.config.js.

error Error: The 'svelte' condition in exports must be used with @rollup/plugin-node-resolve's exportConditions ↓

cause Missing exportConditions in node-resolve config.

fix

Add 'exportConditions: ['svelte']' to resolve plugin options.

Warnings

breaking rollup-plugin-svelte v6 dropped support for Rollup < 1.x and Svelte < 3.x. ↓

fix Upgrade to Rollup 1.x/2.x+ and Svelte 3.x+.

breaking v7.0.0 removed the 'css' option (custom CSS output). CSS handling is now always via emitCss. ↓

fix Use emitCss: true (default) or false. For custom CSS handling, use Rollup's asset pipeline.

gotcha The plugin requires @rollup/plugin-node-resolve with exportConditions: ['svelte'] to resolve Svelte components from node_modules. ↓

fix Add resolve({ browser: true, exportConditions: ['svelte'] }) to your rollup config.

deprecated The 'generate' option in compilerOptions is deprecated in Svelte 4; use 'compilerOptions: { dev: boolean }' instead. ↓

fix For SSR, use SvelteKit or Vite; for client-side compile, omit generate or set to 'dom'.

gotcha If you see 'Error: Cannot find module 'svelte/compiler'', it's because svelte is not installed or not resolved correctly. ↓

fix Ensure svelte is in your devDependencies and that node_modules is accessible.

Install

npm install rollup-plugin-svelte

yarn add rollup-plugin-svelte

pnpm add rollup-plugin-svelte

Imports

default
wrong
```
const svelte = require('rollup-plugin-svelte')
```
correct
```
import svelte from 'rollup-plugin-svelte'
```
The plugin is a default ES module export. CommonJS require() is not supported for this package.
svelte (in rollup.config.js)
wrong
```
import { svelte } from 'rollup-plugin-svelte'
```
correct
```
import svelte from 'rollup-plugin-svelte'
```
The plugin is a default export, not a named export. Using named import will result in undefined.
svelte function usage
wrong
```
plugins: [new svelte()]
```
correct
```
plugins: [svelte({ compilerOptions: { hydratable: true } })]
```
svelte is a function, not a class. Do not use 'new'. It returns a plugin object.

Quickstart

Basic Rollup config to compile Svelte components with the plugin, node-resolve, and commonjs. Includes include filter and dev mode.

// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'public/bundle.js',
    format: 'iife',
  },
  plugins: [
    svelte({
      include: 'src/**/*.svelte',
      compilerOptions: { dev: process.env.NODE_ENV !== 'production' },
    }),
    resolve({ browser: true, exportConditions: ['svelte'] }),
    commonjs(),
  ],
};