bundler-in-browser

0.3.0 verified Sat Apr 25 auth: no javascript

a browser-native bundler (v0.3.0) that automatically installs npm packages, powered by esbuild-wasm. Runs entirely in the browser — no server required. Supports plugins for TailwindCSS, Sass, Vue 3 SFC, and virtual filesystems via @zenfs/core. Smart caching of vendor bundles for performance. Differentiates from alternatives like Webpack or Rollup by running client-side and auto-resolving dependencies. Weekly releases on npm. TypeScript types included.

Common errors

error Error: Cannot find module 'path' ↓

cause Browser environment lacks Node.js 'path' module

fix

Add resolve alias: 'path': 'path-browserify' in your bundler config (Vite/Webpack/Rollup).

error TypeError: bundler.initialize is not a function ↓

cause Incorrect import; likely default import instead of named

fix

Use import { BundlerInBrowser } from 'bundler-in-browser' (named export).

error Error: esbuild-wasm not found ↓

cause Missing esbuild-wasm peer dependency

fix

Run npm install esbuild-wasm.

error ReferenceError: wrapCommonJS is not defined ↓

cause wrapCommonJS is a named export, not default

fix

Use import { wrapCommonJS } from 'bundler-in-browser'.

Warnings

gotcha Requires path-browserify alias in bundler config (Vite, Webpack, Rollup) to resolve 'path' module ↓

fix Add resolve alias: 'path': 'path-browserify' in your bundler config.

gotcha initialize() must be called once before any build; multiple calls re-initialize esbuild-wasm ↓

fix Ensure you await bundler.initialize() only once or check if already initialized.

breaking wrapCommonJS is required to execute the build output; output is CommonJS, not a direct string ↓

fix Always use wrapCommonJS(buildResult.js) before eval/new Function.

gotcha esbuild-wasm must be installed separately; not bundled as peer dependency ↓

fix Run npm install esbuild-wasm alongside bundler-in-browser.

deprecated Sass plugin may require specific sass version; peer dep is ^1.77.8 ↓

fix Install sass@^1.77.8 to ensure compatibility.

Install

npm install bundler-in-browser

yarn add bundler-in-browser

pnpm add bundler-in-browser

Imports

BundlerInBrowser

wrong

const BundlerInBrowser = require('bundler-in-browser')

correct

import { BundlerInBrowser } from 'bundler-in-browser'

ESM-only package; require will fail in Node. Use import.

wrapCommonJS

wrong

import wrapCommonJS from 'bundler-in-browser'

correct

import { wrapCommonJS } from 'bundler-in-browser'

wrapCommonJS is a named export, not default. ESM-only.

installSassPlugin
```
import { installSassPlugin } from 'bundler-in-browser'
```
Named export for optional Sass support. Requires 'sass' package installed.
installVuePlugin
```
import { installVuePlugin } from 'bundler-in-browser'
```
Named export for Vue 3 SFC support. Requires 'vue' package installed.

Quickstart

Shows initialization, virtual filesystem setup, bundling, and executing CommonJS output with CSS injection.

import { BundlerInBrowser, wrapCommonJS } from 'bundler-in-browser';
import { fs } from '@zenfs/core';

fs.mkdirSync('/src');
fs.writeFileSync(
  '/src/index.js',
  `
    import confetti from "canvas-confetti";
    confetti();
    const elt = document.createElement('h1');
    elt.textContent = 'BundlerInBrowser!';
    document.body.appendChild(elt);
  `
);

const bundler = new BundlerInBrowser(fs);
await bundler.initialize();

bundler.config.entrypoint = '/src/index.js';
const buildResult = await bundler.build();

const run = new Function('return ' + wrapCommonJS(buildResult.js));
const userExports = run();

if (buildResult.css) {
  const style = document.createElement('style');
  style.textContent = buildResult.css;
  document.head.appendChild(style);
}