esbuild-standalone

0.0.19 verified Fri May 01 auth: no javascript

esbuild-standalone v0.0.19 provides a standalone build of Esbuild for use in browsers, leveraging Service Worker and esbuild-wasm to enable JSX/TSX transpilation without a Node.js build step. It is an alternative to @babel/standalone and esm.sh/tsx, offering faster compilation via Esbuild. It supports inline (no SW) and external (SW) setups, works with import maps, and handles script types like text/babel, text/jsx, text/tsx, etc. Release cadence is irregular; version 0.0.x suggests early development. Key differentiators: easy prototyping in HTML, Service Worker caching, and use of Esbuild's speed.

Common errors

error Failed to register Service Worker: The script has an unsupported MIME type ('text/html'). ↓

cause Service worker file not found or served as HTML instead of JavaScript.

fix

Ensure the service-worker.js file is accessible at the correct path and served with Content-Type: text/javascript.

error Uncaught (in promise) DOMException: Failed to construct 'Worker': Script at '...' cannot be loaded. ↓

cause Cross-origin restrictions or invalid path for service worker script.

fix

Serve service-worker.js from same origin (root path) or use data-sw-url with a correct URL.

error Cannot find module 'react' (imported from...) ↓

cause Missing or incorrect import map entries for external dependencies.

fix

Define import map with correct URLs and ?external query for singleton libraries like React.

Warnings

gotcha External dependencies (e.g., React) must be marked with ?external in importmap to avoid duplicate bundle instances. ↓

fix Use ?external=react in importmap URLs as shown in the quickstart.

gotcha Service Worker must be served from the root path (e.g., /service-worker.js) due to scope restrictions. ↓

fix Place service-worker.js in your public root or use data-sw-url to specify alternative path.

gotcha Without Service Worker setup, features like caching and external compilation are limited; inline usage may have reduced performance. ↓

fix Set up Service Worker files as described in the documentation for full functionality.

breaking Version 0.x.x is unstable; API and behavior may change without notice. ↓

fix Pin a specific version in production or use alternative like @babel/standalone.

gotcha The package uses esbuild-wasm, which may have slower initial load due to Wasm binary download (~8MB). ↓

fix Preload or cache the Wasm file using Service Worker to improve performance.

Install

npm install esbuild-standalone

yarn add esbuild-standalone

pnpm add esbuild-standalone

Imports

main (default)
wrong
```
import esbuildStandalone from 'esbuild-standalone'
```
correct
```
import 'https://esm.sh/esbuild-standalone'
```
The package is a side-effect module that auto-processes <script> tags; no named exports.

Service Worker (default)

wrong

import 'esbuild-standalone/service-worker'

correct

importScripts('https://unpkg.com/esbuild-standalone@0.0.19/service-worker.js')

Use importScripts in classic SW, or import in module SW from the .mjs file.

ESM Service Worker (default)

wrong

import 'esbuild-standalone/sw'

correct

import 'https://unpkg.com/esbuild-standalone@0.0.19/service-worker.mjs'

Module SW files use .mjs extension; ensure correct path.

Quickstart

Shows inline setup with importmap and JSX transpilation via esbuild-standalone without a build step.

<!DOCTYPE html>
<html lang="en">
<head>
  <script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@19.0.0",
      "react/jsx-runtime": "https://esm.sh/react@19.0.0/jsx-runtime.js?external=react",
      "react-dom/client": "https://esm.sh/react-dom@19.0.0/client?external=react"
    }
  }
  </script>
  <script src="https://esm.sh/esbuild-standalone" type="module"></script>
</head>
<body>
  <div id="root">Loading...</div>
  <script type="text/babel">
    import { useState } from 'react';
    import { createRoot } from 'react-dom/client';
    function App() {
      const [count, setCount] = useState(0);
      return <div>
        <h2>Hello, esbuild-standalone!</h2>
        <button onClick={() => setCount(v => v + 1)}>Count: {count}</button>
      </div>;
    }
    createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>