rollup-plugin-svelte-ssr

1.0.3 verified Mon Apr 27 auth: no javascript maintenance

Server-side rendering of a Svelte app at build-time using a Rollup plugin. Current stable version is 1.0.3, last released in June 2020. The plugin pre-renders a Svelte component with specified props during the Rollup build, outputting static HTML and CSS files. Differentiators: simple Rollup integration, supports custom output file naming, CSS/HTML preprocessing, and selective JS file emission. Ideal for generating static HTML for Svelte apps in a Rollup build pipeline. Note: This project appears to be in maintenance mode with no recent updates.

Common errors

error Error: generate option must be 'dom' or 'ssr' ↓

cause Missing or incorrect generate option in svelte plugin.

fix

Add svelte({ generate: 'ssr' }) to your Rollup config.

error TypeError: ssr is not a function ↓

cause Using a named import instead of default import.

fix

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

error The plugin 'rollup-plugin-svelte-ssr' is not compatible with Rollup 3+ ↓

cause The plugin was built for Rollup 1.x/2.x and may break with Rollup 3.x.

fix

Use an older version of Rollup or look for an alternative plugin.

Warnings

gotcha The plugin expects svelte({ generate: 'ssr' }) to be used before the ssr plugin. Order matters. ↓

fix Place the svelte plugin with generate: 'ssr' before the ssr plugin in the plugins array.

deprecated This package has not been updated since June 2020. It may not support newer Svelte or Rollup versions. ↓

fix Consider using built-in SvelteKit SSR or other actively maintained solutions.

gotcha The props option only supports static props at build time; runtime dynamic props are not possible. ↓

fix Use environment variables or build-time configuration to inject dynamic values.

gotcha If skipEmit is set to false (default), the JS output file will still be emitted even though SSR HTML is generated. This may cause confusion. ↓

fix Set skipEmit: true if you only need the HTML output.

Install

npm install rollup-plugin-svelte-ssr

yarn add rollup-plugin-svelte-ssr

pnpm add rollup-plugin-svelte-ssr

Imports

default

wrong

const ssr = require('rollup-plugin-svelte-ssr')

correct

import ssr from 'rollup-plugin-svelte-ssr'

Package exposes a default export as a function.

ssr

wrong

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

correct

import ssr from 'rollup-plugin-svelte-ssr'

Named import incorrectly used; only default export exists.

RollupPluginSvelteSsr
wrong
```
import RollupPluginSvelteSsr from 'rollup-plugin-svelte-ssr'
```
correct
```
import ssr from 'rollup-plugin-svelte-ssr'
```
The default export is a function, not a class. Renaming is allowed but not necessary.

Quickstart

Rollup config to SSR a Svelte component into a static HTML file during build.

// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import ssr from 'rollup-plugin-svelte-ssr';

export default {
  input: 'src/App.svelte',
  output: {
    format: 'cjs',
    file: 'dist/ssr.js',
  },
  plugins: [
    svelte({ generate: 'ssr' }),
    ssr({
      fileName: 'ssr.html',
      props: { name: 'World' },
    }),
  ],
};
// Assumes a Svelte component at src/App.svelte with export let name;