Sandpack Transpiler

0.3.2 verified Fri May 01 auth: no javascript

A highly optimized transpiler for JSX, CJS, and ESM, built for the Sandpack ecosystem and based on Sucrase. Version 0.3.2 (pre-stable) ships TypeScript types, requires Node >=16, and focuses on performance, claiming >1M lines/sec on benchmarks. It is designed specifically for in-browser transpilation in sandboxed environments, distinguishing itself from general-purpose transpilers like Babel, esbuild, and swc by targeting Sandpack's use cases with minimal overhead. Currently in active development with no stable release.

Common errors

error Error: The preset option is no longer supported. Use transforms instead. ↓

cause Using deprecated `preset` property in options.

fix

Replace { preset: 'react' } with { transforms: ['jsx', 'imports'] }.

error TypeError: sandpackTranspiler is not a constructor ↓

cause Importing the package as an ES module and trying to use `new` on a default import when the default is not a class.

fix

Use import { transpile } from 'sandpack-transpiler' and call it as a function.

error SyntaxError: Cannot use import statement outside a module ↓

cause Running ES module import syntax in a CommonJS context.

fix

Ensure package.json has "type": "module" or use .mjs extension.

Warnings

breaking Version 0.3.x removed the 'transform' export; use 'transpile' instead. ↓

fix Replace `import { transform } from 'sandpack-transpiler'` with `import { transpile } from 'sandpack-transpiler'`.

gotcha All exports are async; calling transpile without await will return a Promise. ↓

fix Always `await transpile(...)` or chain `.then()`.

deprecated The 'preset' option in transpile is deprecated; use 'transforms' instead. ↓

fix Use `transforms: ['jsx', 'imports']` instead of `preset: 'react'`.

gotcha Node.js >=16 required; earlier versions will throw an error due to top-level await usage. ↓

fix Upgrade Node.js to version 16 or later.

breaking Version 0.2.0 changed the default export from a function to a class. ↓

fix Use `new SandpackTranspiler()` and call `.transpile()` method, or import `{ transpile }` instead.

Install

npm install sandpack-transpiler

yarn add sandpack-transpiler

pnpm add sandpack-transpiler

Imports

transpile

wrong

const transpile = require('sandpack-transpiler').transpile

correct

import { transpile } from 'sandpack-transpiler'

ESM-only; CJS require not supported.

transpileWithSucrase

wrong

import { transpileWithSucrase } from 'sandpack-transpiler/transpilers'

correct

import { transpileWithSucrase } from 'sandpack-transpiler'

Named export, not a default export.

default

wrong

const SandpackTranspiler = require('sandpack-transpiler').default

correct

import SandpackTranspiler from 'sandpack-transpiler'

Default export is the main transpiler class; ESM only.

Quickstart

Transpile a simple ESM module using the default React preset. The result is ESNext with JSX compiled.

import { transpile } from 'sandpack-transpiler';

const code = `const x = 1;
export default x;`;

transpile(code, {
  filePath: '/App.js',
  preset: 'react',
}).then((result) => {
  console.log(result.code);
  // Output: "var x = 1; export default x;"
});