{"id":26356,"library":"sandpack-transpiler","title":"Sandpack Transpiler","description":"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.","status":"active","version":"0.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/codesandbox/sandpack-transpiler","tags":["javascript","babel","jsx","typescript"],"install":[{"cmd":"npm install sandpack-transpiler","lang":"bash","label":"npm"},{"cmd":"yarn add sandpack-transpiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add sandpack-transpiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"core transpilation logic derived from Sucrase","package":"sucrase","optional":false}],"imports":[{"note":"ESM-only; CJS require not supported.","wrong":"const transpile = require('sandpack-transpiler').transpile","symbol":"transpile","correct":"import { transpile } from 'sandpack-transpiler'"},{"note":"Named export, not a default export.","wrong":"import { transpileWithSucrase } from 'sandpack-transpiler/transpilers'","symbol":"transpileWithSucrase","correct":"import { transpileWithSucrase } from 'sandpack-transpiler'"},{"note":"Default export is the main transpiler class; ESM only.","wrong":"const SandpackTranspiler = require('sandpack-transpiler').default","symbol":"default","correct":"import SandpackTranspiler from 'sandpack-transpiler'"}],"quickstart":{"code":"import { transpile } from 'sandpack-transpiler';\n\nconst code = `const x = 1;\nexport default x;`;\n\ntranspile(code, {\n  filePath: '/App.js',\n  preset: 'react',\n}).then((result) => {\n  console.log(result.code);\n  // Output: \"var x = 1; export default x;\"\n});","lang":"typescript","description":"Transpile a simple ESM module using the default React preset. The result is ESNext with JSX compiled."},"warnings":[{"fix":"Replace `import { transform } from 'sandpack-transpiler'` with `import { transpile } from 'sandpack-transpiler'`.","message":"Version 0.3.x removed the 'transform' export; use 'transpile' instead.","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"Always `await transpile(...)` or chain `.then()`.","message":"All exports are async; calling transpile without await will return a Promise.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use `transforms: ['jsx', 'imports']` instead of `preset: 'react'`.","message":"The 'preset' option in transpile is deprecated; use 'transforms' instead.","severity":"deprecated","affected_versions":">=0.2.0 <0.3.0"},{"fix":"Upgrade Node.js to version 16 or later.","message":"Node.js >=16 required; earlier versions will throw an error due to top-level await usage.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use `new SandpackTranspiler()` and call `.transpile()` method, or import `{ transpile }` instead.","message":"Version 0.2.0 changed the default export from a function to a class.","severity":"breaking","affected_versions":">=0.2.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Replace `{ preset: 'react' }` with `{ transforms: ['jsx', 'imports'] }`.","cause":"Using deprecated `preset` property in options.","error":"Error: The preset option is no longer supported. Use transforms instead."},{"fix":"Use `import { transpile } from 'sandpack-transpiler'` and call it as a function.","cause":"Importing the package as an ES module and trying to use `new` on a default import when the default is not a class.","error":"TypeError: sandpackTranspiler is not a constructor"},{"fix":"Ensure package.json has `\"type\": \"module\"` or use `.mjs` extension.","cause":"Running ES module import syntax in a CommonJS context.","error":"SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}