{"id":18189,"library":"bundler-in-browser","title":"bundler-in-browser","description":"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.","status":"active","version":"0.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/lyonbot/bundler-in-browser","tags":["javascript","sandbox","repl","artifacts","canvas","example","bundler","esbuild","browser","typescript"],"install":[{"cmd":"npm install bundler-in-browser","lang":"bash","label":"npm"},{"cmd":"yarn add bundler-in-browser","lang":"bash","label":"yarn"},{"cmd":"pnpm add bundler-in-browser","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"virtual filesystem required for source code and node_modules","package":"@zenfs/core","optional":false},{"reason":"core bundling engine","package":"esbuild-wasm","optional":false},{"reason":"optional Sass plugin dependency","package":"sass","optional":true},{"reason":"optional Vue SFC plugin dependency","package":"vue","optional":true},{"reason":"polyfill for Node.js path module (needed in browser)","package":"path-browserify","optional":true}],"imports":[{"note":"ESM-only package; require will fail in Node. Use import.","wrong":"const BundlerInBrowser = require('bundler-in-browser')","symbol":"BundlerInBrowser","correct":"import { BundlerInBrowser } from 'bundler-in-browser'"},{"note":"wrapCommonJS is a named export, not default. ESM-only.","wrong":"import wrapCommonJS from 'bundler-in-browser'","symbol":"wrapCommonJS","correct":"import { wrapCommonJS } from 'bundler-in-browser'"},{"note":"Named export for optional Sass support. Requires 'sass' package installed.","wrong":"","symbol":"installSassPlugin","correct":"import { installSassPlugin } from 'bundler-in-browser'"},{"note":"Named export for Vue 3 SFC support. Requires 'vue' package installed.","wrong":"","symbol":"installVuePlugin","correct":"import { installVuePlugin } from 'bundler-in-browser'"}],"quickstart":{"code":"import { BundlerInBrowser, wrapCommonJS } from 'bundler-in-browser';\nimport { fs } from '@zenfs/core';\n\nfs.mkdirSync('/src');\nfs.writeFileSync(\n  '/src/index.js',\n  `\n    import confetti from \"canvas-confetti\";\n    confetti();\n    const elt = document.createElement('h1');\n    elt.textContent = 'BundlerInBrowser!';\n    document.body.appendChild(elt);\n  `\n);\n\nconst bundler = new BundlerInBrowser(fs);\nawait bundler.initialize();\n\nbundler.config.entrypoint = '/src/index.js';\nconst buildResult = await bundler.build();\n\nconst run = new Function('return ' + wrapCommonJS(buildResult.js));\nconst userExports = run();\n\nif (buildResult.css) {\n  const style = document.createElement('style');\n  style.textContent = buildResult.css;\n  document.head.appendChild(style);\n}","lang":"typescript","description":"Shows initialization, virtual filesystem setup, bundling, and executing CommonJS output with CSS injection."},"warnings":[{"fix":"Add resolve alias: 'path': 'path-browserify' in your bundler config.","message":"Requires path-browserify alias in bundler config (Vite, Webpack, Rollup) to resolve 'path' module","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure you await bundler.initialize() only once or check if already initialized.","message":"initialize() must be called once before any build; multiple calls re-initialize esbuild-wasm","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always use wrapCommonJS(buildResult.js) before eval/new Function.","message":"wrapCommonJS is required to execute the build output; output is CommonJS, not a direct string","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Run npm install esbuild-wasm alongside bundler-in-browser.","message":"esbuild-wasm must be installed separately; not bundled as peer dependency","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Install sass@^1.77.8 to ensure compatibility.","message":"Sass plugin may require specific sass version; peer dep is ^1.77.8","severity":"deprecated","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add resolve alias: 'path': 'path-browserify' in your bundler config (Vite/Webpack/Rollup).","cause":"Browser environment lacks Node.js 'path' module","error":"Error: Cannot find module 'path'"},{"fix":"Use import { BundlerInBrowser } from 'bundler-in-browser' (named export).","cause":"Incorrect import; likely default import instead of named","error":"TypeError: bundler.initialize is not a function"},{"fix":"Run npm install esbuild-wasm.","cause":"Missing esbuild-wasm peer dependency","error":"Error: esbuild-wasm not found"},{"fix":"Use import { wrapCommonJS } from 'bundler-in-browser'.","cause":"wrapCommonJS is a named export, not default","error":"ReferenceError: wrapCommonJS is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}