{"id":22242,"library":"rollup-plugin-svelte","title":"rollup-plugin-svelte","description":"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.","status":"active","version":"7.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/sveltejs/rollup-plugin-svelte","tags":["javascript","svelte","rollup","typescript"],"install":[{"cmd":"npm install rollup-plugin-svelte","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-svelte","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-svelte","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, needed as bundler. Requires >=2.0.0.","package":"rollup","optional":false},{"reason":"Peer dependency, required for compiling Svelte components. Requires >=3.5.0.","package":"svelte","optional":false},{"reason":"Plugin resolves node_modules imports; needed to resolve Svelte components from packages with svelte export condition.","package":"@rollup/plugin-node-resolve","optional":true},{"reason":"Plugin converts CommonJS modules to ES module format; often required alongside rollup-plugin-svelte.","package":"@rollup/plugin-commonjs","optional":true}],"imports":[{"note":"The plugin is a default ES module export. CommonJS require() is not supported for this package.","wrong":"const svelte = require('rollup-plugin-svelte')","symbol":"default","correct":"import svelte from 'rollup-plugin-svelte'"},{"note":"The plugin is a default export, not a named export. Using named import will result in undefined.","wrong":"import { svelte } from 'rollup-plugin-svelte'","symbol":"svelte (in rollup.config.js)","correct":"import svelte from 'rollup-plugin-svelte'"},{"note":"svelte is a function, not a class. Do not use 'new'. It returns a plugin object.","wrong":"plugins: [new svelte()]","symbol":"svelte function usage","correct":"plugins: [svelte({ compilerOptions: { hydratable: true } })]"}],"quickstart":{"code":"// rollup.config.js\nimport svelte from 'rollup-plugin-svelte';\nimport resolve from '@rollup/plugin-node-resolve';\nimport commonjs from '@rollup/plugin-commonjs';\n\nexport default {\n  input: 'src/main.js',\n  output: {\n    file: 'public/bundle.js',\n    format: 'iife',\n  },\n  plugins: [\n    svelte({\n      include: 'src/**/*.svelte',\n      compilerOptions: { dev: process.env.NODE_ENV !== 'production' },\n    }),\n    resolve({ browser: true, exportConditions: ['svelte'] }),\n    commonjs(),\n  ],\n};","lang":"javascript","description":"Basic Rollup config to compile Svelte components with the plugin, node-resolve, and commonjs. Includes include filter and dev mode."},"warnings":[{"fix":"Upgrade to Rollup 1.x/2.x+ and Svelte 3.x+.","message":"rollup-plugin-svelte v6 dropped support for Rollup < 1.x and Svelte < 3.x.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Use emitCss: true (default) or false. For custom CSS handling, use Rollup's asset pipeline.","message":"v7.0.0 removed the 'css' option (custom CSS output). CSS handling is now always via emitCss.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Add resolve({ browser: true, exportConditions: ['svelte'] }) to your rollup config.","message":"The plugin requires @rollup/plugin-node-resolve with exportConditions: ['svelte'] to resolve Svelte components from node_modules.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"For SSR, use SvelteKit or Vite; for client-side compile, omit generate or set to 'dom'.","message":"The 'generate' option in compilerOptions is deprecated in Svelte 4; use 'compilerOptions: { dev: boolean }' instead.","severity":"deprecated","affected_versions":">=7.0.0"},{"fix":"Ensure svelte is in your devDependencies and that node_modules is accessible.","message":"If you see 'Error: Cannot find module 'svelte/compiler'', it's because svelte is not installed or not resolved correctly.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save-dev rollup-plugin-svelte'.","cause":"Package not installed or not in node_modules.","error":"Error: Cannot find module 'rollup-plugin-svelte'"},{"fix":"Use 'import svelte from 'rollup-plugin-svelte'' instead of 'import { svelte } from ...'.","cause":"Using named import instead of default import.","error":"Error: 'svelte' is not exported by node_modules/rollup-plugin-svelte/index.mjs"},{"fix":"Add rollup-plugin-svelte to your plugins list in rollup.config.js.","cause":"Rollup cannot parse .svelte files without this plugin.","error":"Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)"},{"fix":"Add 'exportConditions: ['svelte']' to resolve plugin options.","cause":"Missing exportConditions in node-resolve config.","error":"Error: The 'svelte' condition in exports must be used with @rollup/plugin-node-resolve's exportConditions"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}