rollup-plugin-uniroll-svelte

4.0.1-alpha.0 verified Fri May 01 auth: no javascript

A Rollup plugin that integrates Svelte compilation with Uniroll, enabling bundling of Svelte components in browser or Node environments. Current version is 4.0.1-alpha.0, with pre-release status and active development. It provides TypeScript support, configurable Svelte compiler options, and compatibility with Uniroll's bundling pipeline. Differentiators include support for IE via ES5 transpilation, CSS extraction instead of injection, and integration with esm.sh for CDN resolution. Requires Svelte 3.x, Rollup, and Uniroll as peer dependencies.

Common errors

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

cause The CDN provider (e.g., esm.sh) does not resolve Svelte's internal modules correctly.

fix

Switch to Skypack CDN: cdnPrefix: 'https://cdn.skypack.dev/'.

error TypeError: svelte is not a function ↓

cause Using default import instead of named import. The module exports `svelte` as a named export.

fix

Use import { svelte } from 'rollup-plugin-uniroll-svelte'.

error Error: The plugin 'rollup-plugin-uniroll-svelte' requires Svelte version 3.x, but you have 4.x installed. ↓

cause Installed Svelte version is incompatible.

fix

Downgrade Svelte to 3.x: npm install svelte@3.

error Cannot find module 'rollup-plugin-uniroll-svelte/lib/stylePreproccessor' ↓

cause Import path for `createStylePreprocessor` changed in v4.

fix

Update import to rollup-plugin-uniroll-svelte/lib/server/stylePreproccessor.

Warnings

breaking Breaking change in v4: The plugin now requires Uniroll v4 and Svelte 3.x only. ↓

fix Update Uniroll to v4 and ensure Svelte is version 3.x.

deprecated The `createStylePreprocessor` import path changed from 'rollup-plugin-uniroll-svelte/lib/stylePreproccessor' to 'rollup-plugin-uniroll-svelte/lib/server/stylePreproccessor'. ↓

fix Use the new import path from 'rollup-plugin-uniroll-svelte/lib/server/stylePreproccessor'.

gotcha The plugin does not work with Svelte 4.x; only Svelte 3.x is supported. ↓

fix Use Svelte 3.x or prepare to migrate to a different Svelte Rollup plugin.

gotcha CDN resolution for Svelte internal modules (like 'svelte/internal') may fail with some CDNs (e.g., esm.sh). ↓

fix Use Skypack CDN (https://cdn.skypack.dev/) as shown in examples.

breaking The plugin now exports only named exports; default export was removed. ↓

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

Install

npm install rollup-plugin-uniroll-svelte

yarn add rollup-plugin-uniroll-svelte

pnpm add rollup-plugin-uniroll-svelte

Imports

svelte

wrong

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

correct

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

Default export is not available; use named export `svelte`.

createStylePreprocessor

wrong

import { createStylePreprocessor } from 'rollup-plugin-uniroll-svelte'

correct

import { createStylePreprocessor } from 'rollup-plugin-uniroll-svelte/lib/server/stylePreproccessor'

This utility is located in a subpath; exporting from main entry is not supported.

bundle

wrong

import { bundle } from 'rollup-plugin-uniroll-svelte'

correct

import { bundle } from 'uniroll'

`bundle` is part of Uniroll, not this plugin.

Quickstart

Minimal example: bundle a Svelte component using Uniroll and the Svelte plugin.

import ts from "typescript";
import { bundle } from "uniroll";
import { svelte } from "rollup-plugin-uniroll-svelte";

const files = {
  "/index.svelte": `<script>let count = 0</script><button on:click={() => count++}>{count}</button>`
};

const cdnPrefix = "https://cdn.skypack.dev/";

async function main() {
  const result = await bundle({
    input: "/index.svelte",
    files,
    extraPlugins: [
      svelte({
        target: ts.ScriptTarget.ES2019,
        cdnPrefix,
        svelteOptions: {}
      })
    ]
  });
  console.log(result);
}

main().catch(console.error);