esbuild-plugin-svelte

0.1.1 verified Fri May 01 auth: no javascript

An esbuild plugin to compile Svelte components during bundling. At version 0.1.1, it integrates Svelte 3 with esbuild, handling .svelte files and generating CSS as separate output. It supports preprocessors and compiler options via svelte.config.js. Compared to alternatives like rollup-plugin-svelte, this plugin is lightweight and designed for esbuild's speed. It is best suited for projects already using esbuild and needing Svelte support. Note that it only supports Svelte 3 and esbuild ^0.8. CSS handling defaults to false (esbuild manages CSS) unless overridden.

Common errors

error Cannot find module 'esbuild-plugin-svelte' ↓

cause Plugin not installed or missing from package.json.

fix

npm install --save-dev esbuild-plugin-svelte

error Dynamic require of "esbuild-plugin-svelte" is not supported ↓

cause Using CommonJS require in an ESM context.

fix

Use import svelte from 'esbuild-plugin-svelte' instead of require().

error TypeError: svelte is not a function ↓

cause Incorrect import (named import instead of default).

fix

Use import svelte from 'esbuild-plugin-svelte' (no braces).

Warnings

breaking This plugin only supports Svelte 3; Svelte 4 or 5 will not compile. ↓

fix Use svelte@^3.20. If using Svelte 4+, switch to a compatible plugin (e.g., @j3w1/esbuild-plugin-svelte).

gotcha CSS output is disabled by default; if you need separate CSS, set compilerOptions.css to true. ↓

fix Pass { compilerOptions: { css: true } } to svelte() plugin.

breaking Requires esbuild ^0.8; does not work with esbuild 0.9+ due to API changes. ↓

fix Downgrade esbuild to 0.8.x or use a newer fork of the plugin.

deprecated This package has not been updated since 2021; consider using maintained forks. ↓

fix Switch to @j3w1/esbuild-plugin-svelte or @sveltejs/enhanced-img for newer esbuild versions.

Install

npm install esbuild-plugin-svelte

yarn add esbuild-plugin-svelte

pnpm add esbuild-plugin-svelte

Imports

default

wrong

import { svelte } from 'esbuild-plugin-svelte'

correct

import svelte from 'esbuild-plugin-svelte'

Default export only; named import will result in undefined.

esbuild.build
wrong
```
const build = require('esbuild').build
```
correct
```
import { build } from 'esbuild'
```
ESM is preferred; CommonJS require works but is not typical for esbuild.
svelte-preprocess
wrong
```
const preprocess = require('svelte-preprocess')
```
correct
```
import preprocess from 'svelte-preprocess'
```
If using preprocessors, install svelte-preprocess separately. ESM import is recommended.

Quickstart

Bundles a Svelte app using esbuild with the svelte plugin, outputting a single JS bundle.

import { build } from 'esbuild';
import svelte from 'esbuild-plugin-svelte';

build({
  entryPoints: ['src/main.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [svelte()],
}).catch(() => process.exit(1));