syn-bundler

library0.0.1jsnpmunverified

syn-bundler is an in-browser JavaScript/TypeScript bundler that operates entirely on a virtual file system, using esbuild-wasm under the hood. Version 0.0.1 is a pre-release with no established release cadence. It differentiates by running fully client-side without a server, making it suitable for browser-based IDEs, playgrounds, and code sandboxes. Includes built-in support for JSX, CSS, SVG, and PNG assets via plugins.

devops

npm install syn-bundler

package ↗

INSTALL

IMPORT

SIG · SYN-BUNDLER

syn-bundler

devopsjavascriptv0.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

bundle

✓ import { bundle } from 'syn-bundler'

✗ const bundle = require('syn-bundler')

ESM-only; no CommonJS support. TypeScript types are included.

Compiler

✓ import { Compiler } from 'syn-bundler'

Only exported with named import. Not exported as default.

Resolver

✓ import { Resolver } from 'syn-bundler'

Used internally by the bundler; exported for advanced customization.

Demonstrates creating a virtual file system with TSX, CSS, and SVG, then bundling with external React and ReactDOM via import map.

import { bundle } from 'syn-bundler'; const files = new Map<string, string | Uint8Array>(); files.set("/index.tsx", ` import React from 'react'; import { createRoot } from 'react-dom/client'; import './styles.css'; import logo from './logo.svg'; const App = () => ( <div> <h1>Hello from syn-bundler!</h1> <img src={logo} alt="Logo" /> </div> ); const root = createRoot(document.getElementById('root')!); root.render(<App />); `); files.set("/styles.css", `body { margin: 0; font-family: sans-serif; }`); files.set("/logo.svg", new TextEncoder().encode(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="blue"/></svg>`)); const importMap: Record<string, string> = { "react": "https://esm.sh/react@18.2.0", "react-dom": "https://esm.sh/react-dom@18.2.0" }; const output = await bundle("/index.tsx", files, {}, importMap); console.log(output);

Debug

Known issues

gotchaAll file paths in the Map must be absolute (e.g., starting with '/'). Relative paths like './foo.ts' will not resolve correctly.

fix

Use absolute paths starting with '/' for all files in the Map.

affects: >=0.0.1

gotchaThe importMap is required when JSX is used without bundled React; otherwise the bundle will fail with unresolved modules.

fix

Provide an importMap with 'react' and 'react-dom' mapped to CDN URLs (e.g., https://esm.sh/).

affects: >=0.0.1

deprecatedThe default bundling always sets 'format: 'esm'' and 'target: 'esnext''. There is no option to change these via the config parameter.

fix

The bundled output is always ESM. Use a module-capable environment (e.g., <script type="module">) to run it.

affects: >=0.0.1

gotchaFiles with extensions not handled by built-in plugins (e.g., .json, .woff) will be silently ignored or cause build errors.

fix

Ensure all imported file types are supported or provide a custom plugin.

affects: >=0.0.1

Errors

Common errors & fixes

Error: Could not resolve 'react' from '/index.tsx'

ImportMap is missing or incomplete for React dependencies.

fix

Add an importMap with entries for 'react' and 'react-dom' (and any other external packages).

TypeError: Cannot read properties of undefined (reading 'charAt')

A file path in the Map is not starting with '/' (relative path used).

fix

Ensure all keys in the files Map start with a forward slash '/'.

Error: Build failed with 1 error: error: Could not resolve './styles.css' from '/index.tsx'

The index file imports './styles.css' but the file is not in the VFS.

fix

Add the CSS file to the files Map with the correct absolute path matching the import.

Upgrade

Version history

0.0.1latest on npm

Audit

Dependencies

esbuild-wasmrequiredCore bundling engine; provides the wasm binary for browser-side compilation.

Agent activity

5 hits · last 30 days

node

Resources

packagesyn-bundler ↗