{"id":25539,"library":"esm-compiler","title":"ESM Compiler","description":"ESM Compiler is a Rust-based compiler for the esm.sh playground, leveraging swc for JavaScript/TypeScript/JSX transformation and lightningcss for CSS. Built as a WebAssembly module, it compiles modern frontend code into ESM-compatible output with import maps. Version 0.9.2 is the current stable release; it is actively developed as part of the esm.sh ecosystem. Key differentiators include its Wasm-first architecture, Rust performance, and tight integration with esm.sh's import map resolution, making it suitable for in-browser code transformation without a server.","status":"active","version":"0.9.2","language":"javascript","source_language":"en","source_url":"https://github.com/esm-dev/esm-compiler","tags":["javascript","typescript"],"install":[{"cmd":"npm install esm-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add esm-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add esm-compiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"JavaScript/TypeScript/JSX transformation engine","package":"swc","optional":false},{"reason":"CSS minification and transformation","package":"lightningcss","optional":false}],"imports":[{"note":"This is an ESM package loaded via URL (esm.sh). init() must be called to load the Wasm module before using transform.","wrong":"const init = require('esm-compiler')","symbol":"init","correct":"import init, { transform } from 'https://esm.sh/esm-compiler'"},{"note":"transform is a named export, not default. Must be destructured from the module.","wrong":"import transform from 'esm-compiler'","symbol":"transform","correct":"import { transform } from 'https://esm.sh/esm-compiler'"},{"note":"TransformOptions is a TypeScript type and should be imported using import type for runtime efficiency in bundlers.","wrong":"import { TransformOptions } from 'esm-compiler'","symbol":"TransformOptions","correct":"import type { TransformOptions } from 'https://esm.sh/esm-compiler'"}],"quickstart":{"code":"import init, { transform } from 'https://esm.sh/esm-compiler@0.9.2';\nawait init();\n\nconst code = `\nimport { useState } from \"react\";\n\nexport default function App() {\n  const [msg] = useState(\"world\");\n  return <h1>Hello {msg}!</h1>;\n}\n`;\n\nconst importMap = {\n  imports: {\n    \"@jsxImportSource\": \"https://esm.sh/react@18\",\n    \"react\": \"https://esm.sh/react@18\"\n  }\n};\n\nconst result = transform('./App.tsx', code, { importMap });\nconsole.log(result.code);","lang":"typescript","description":"Initializes the Wasm compiler, transforms a React JSX component with an import map, and logs the compiled ESM output."},"warnings":[{"fix":"Ensure init() is awaited once at the start of your application.","message":"init() must be called before any transform call","severity":"breaking","affected_versions":"all"},{"fix":"Use the full esm.sh URL (https://esm.sh/esm-compiler) instead of a local or npm import.","message":"Version 0.9.x changed import resolution to require full URL imports","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Use the async transform function returned after init().","message":"The previous synchronous transform API is deprecated","severity":"deprecated","affected_versions":">=0.9.0"},{"fix":"Use 'import type { ... }' for type imports to avoid bundling errors.","message":"TypeScript types are only exported as type-only; cannot be used as runtime values","severity":"gotcha","affected_versions":"all"},{"fix":"Always specify the JSX import source in the import map imports object.","message":"importMap.imports must include '@jsxImportSource' for JSX to work correctly","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Call await init() before calling transform, and check network requests for the .wasm file.","cause":"init() was not called or the Wasm module failed to load","error":"Error: transform is not a function"},{"fix":"Wrap your transform calls in an async function and ensure init() is awaited.","cause":"Calling transform before init() has completed","error":"Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__wbg_...')"},{"fix":"Use a bundler like Vite or configure webpack to support WebAssembly and esm.sh imports.","cause":"Bundler (e.g., webpack) cannot handle Wasm blob URL or ES module imports from esm.sh","error":"Module parse failed: Unexpected token (10:20) You may need an appropriate loader to handle this file type."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}