svelte-preprocess-esbuild

3.0.1 verified Mon Apr 27 auth: no javascript

A Svelte preprocessor that compiles TypeScript in Svelte files using esbuild. Version 3.0.1 is the latest stable release. It offers faster TypeScript compilation compared to svelte-preprocess's Babel-based TypeScript support, with a subset of esbuild's transform options. It provides both a `typescript` function and a `replace` function for define replacements. Ships TypeScript typings. Peer dependencies: esbuild >=0.14.0 and svelte >=3.5.0. Requires Node >=10. Maintained primarily by lukeed, with stable release cadence.

Common errors

error Error: Cannot find module 'esbuild' ↓

cause Missing peer dependency `esbuild`.

fix

Install esbuild: npm install --save-dev esbuild.

error Error: Multiple typescript preprocessors detected ↓

cause Using both `svelte-preprocess-esbuild` and `svelte-preprocess` with its built-in TypeScript support, causing double compilation.

fix

Set typescript: false in svelte-preprocess options.

error TypeError: sveltePreprocessEsbuild.typescript is not a function ↓

cause Attempting to use default import as a function after v3 API change.

fix

Use const { typescript } = require('svelte-preprocess-esbuild') or import { typescript } from 'svelte-preprocess-esbuild'.

error error: Unexpected "define" ↓

cause Passing `define` option to `replace` function, which does not support it.

fix

Use typescript function instead for define replacements.

Warnings

gotcha When using with `svelte-preprocess`, you must set `typescript: false` in `svelte-preprocess` options to avoid double compilation. ↓

fix Add `preprocess({ typescript: false })` after the `typescript` preprocessor from this package.

gotcha `options.define` replacements will be applied to ALL script tags, including non-TypeScript ones, when using `typescript` preprocessor. ↓

fix Use the `replace` function separately if you want define replacements only on non-TypeScript scripts.

deprecated The `minify` option is forced to false internally; setting it has no effect. ↓

fix Do not pass `minify`; it is always false.

breaking In v3, the default export changed from a function to an object with `typescript` and `replace` properties. ↓

fix Use named imports: `import { typescript } from 'svelte-preprocess-esbuild'`.

gotcha The `tsconfig` option throws if file not found when explicitly provided; default attempts to auto-load but does not throw if missing. ↓

fix Omit `tsconfig` or provide a valid path.

Install

npm install svelte-preprocess-esbuild

yarn add svelte-preprocess-esbuild

pnpm add svelte-preprocess-esbuild

Imports

typescript

wrong

const typescript = require('svelte-preprocess-esbuild').typescript

correct

import { typescript } from 'svelte-preprocess-esbuild'

Both ESM and CJS supported; require works but import preferred in modern projects.

replace

wrong

import replace from 'svelte-preprocess-esbuild'

correct

import { replace } from 'svelte-preprocess-esbuild'

`replace` is a named export, not default.

sveltePreprocessEsbuild
wrong
```
import { default } from 'svelte-preprocess-esbuild'
```
correct
```
import sveltePreprocessEsbuild from 'svelte-preprocess-esbuild'
```
Default export is an object containing `typescript` and `replace`; usage discouraged in favor of named imports.

Quickstart

Configures Svelte to use esbuild for TypeScript compilation alongside svelte-preprocess, with example options for target and define.

// svelte.config.js
import preprocess from 'svelte-preprocess';
import { typescript } from 'svelte-preprocess-esbuild';

export default {
  preprocess: [
    typescript({
      target: 'es2020',
      define: {
        'process.browser': 'true'
      }
    }),
    preprocess({ typescript: false })
  ]
};