{"id":15886,"library":"unpkg-bundler","title":"unpkg-bundler Client-Side ESBuild Bundler","description":"unpkg-bundler is a client-side JavaScript library (current version 0.0.12) designed for in-browser code transpilation and bundling, with a unique capability to dynamically fetch and load npm packages directly from unpkg.com. It leverages esbuild internally for high-performance bundling and supports both ES modules (ESM) and CommonJS (CJS) syntax, as well as TypeScript and TSX with React code. The library's core differentiator is its ability to operate without filesystem access, making it ideal for browser-based development environments, interactive code editors, or learning platforms that need to execute user-provided code with npm dependencies on the fly. Its release cadence is currently irregular, typical for projects in early development.","status":"active","version":"0.0.12","language":"javascript","source_language":"en","source_url":"https://github.com/ChristopherHButler/unpkg-bundler","tags":["javascript","bundler","transpiler","client-side-bundler","esbuild","esbuild-bundler","unpkg","unpkg-bundler","typescript"],"install":[{"cmd":"npm install unpkg-bundler","lang":"bash","label":"npm"},{"cmd":"yarn add unpkg-bundler","lang":"bash","label":"yarn"},{"cmd":"pnpm add unpkg-bundler","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The main `bundle` function is a default export. For CommonJS environments, explicitly import from `unpkg-bundler/lib/cjs`. The primary package entry point is ESM.","wrong":"import { bundle } from 'unpkg-bundler';\nconst bundle = require('unpkg-bundler');","symbol":"bundle","correct":"import bundle from 'unpkg-bundler';"}],"quickstart":{"code":"import bundle from 'unpkg-bundler';\n\n// React component code to be bundled.\n// unpkg-bundler will automatically fetch React and ReactDOM from unpkg.\nconst reactCode = `\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => {\n  return (\n    <div style={{ fontFamily: 'sans-serif', textAlign: 'center' }}>\n      <h1>Hello from unpkg-bundler!</h1>\n      <h2>This code was bundled and transpiled on the client-side.</h2>\n      <p>It automatically fetched React and ReactDOM from unpkg.com.</p>\n    </div>\n  );\n};\n\n// Typically, you'd render this into an existing DOM element.\n// For this quickstart, we'll just demonstrate the bundling output.\nconst rootElement = document.createElement('div');\nrootElement.id = 'root';\ndocument.body.appendChild(rootElement);\n\nReactDOM.render(<App />, rootElement);\n`;\n\nconst runBundle = async () => {\n  console.log('Bundling React code...');\n  const { code, err } = await bundle(reactCode);\n\n  if (err) {\n    console.error('Bundling error:', err);\n    return;\n  }\n\n  console.log('Bundle successful. Executing code...');\n  // To execute in a browser, you can create a <script> tag or use eval.\n  // Be cautious with eval in production due to security implications.\n  // For demonstration:\n  try {\n    // This will execute the bundled code directly in the current scope.\n    // In a real application, you might inject it into an iframe for isolation.\n    new Function(code)();\n    console.log('Code executed successfully. Check the document body for the React app.');\n  } catch (executionError) {\n    console.error('Error executing bundled code:', executionError);\n  }\n};\n\nrunBundle();","lang":"javascript","description":"Demonstrates bundling a React component, including automatic fetching of `react` and `react-dom` from `unpkg.com`, and shows how to execute the resulting bundled code in a browser environment."},"warnings":[{"fix":"Review release notes carefully for updates and consider pinning exact versions in production environments to avoid unexpected changes.","message":"The package is in early development (v0.0.12) and APIs might change frequently without following strict semantic versioning practices.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Ensure calls to `bundle()` are prefixed with `await` and are contained within an `async` function or a top-level `await` context.","message":"The `bundle` function is asynchronous and must be awaited within an `async` context to correctly retrieve results. Forgetting `await` will result in a Promise object instead of the bundled code.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Ensure all input code is provided as a string, and dependencies are resolved via `unpkg.com` or are self-contained within the input string.","message":"`unpkg-bundler` is designed for client-side use without filesystem access. It cannot resolve local file paths or perform operations requiring Node.js-specific modules (like `fs`).","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Use `const bundle = require('unpkg-bundler/lib/cjs');` for CommonJS environments.","message":"CommonJS users importing the package via `require()` must specify the CommonJS entry point at `'unpkg-bundler/lib/cjs'`, as the default package entry is an ES module.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Always import `bundle` as a default import: `import bundle from 'unpkg-bundler';`.","message":"The `bundle` function is a default export. Attempting to destructure it as a named import (e.g., `import { bundle } from 'unpkg-bundler';`) will result in `undefined` or a runtime error.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Change `import { bundle } from 'unpkg-bundler';` to `import bundle from 'unpkg-bundler';`.","cause":"Attempting to import `bundle` as a named export when it is a default export in an ESM context (common with bundlers like Webpack/Vite).","error":"TypeError: (0 , unpkg_bundler__WEBPACK_IMPORTED_MODULE_0__.bundle) is not a function"},{"fix":"Wrap the call to `bundle` in an `async` function, e.g., `const createBundle = async () => { const { code, err } = await bundle(modules); };`.","cause":"Using `await bundle(...)` outside of an `async` function or a top-level `await` context.","error":"SyntaxError: await is only valid in async functions and the top level bodies of modules"},{"fix":"For ESM, use `import bundle from 'unpkg-bundler';`. For CommonJS, use `const bundle = require('unpkg-bundler/lib/cjs');`.","cause":"Trying to use CommonJS `require` in an ES module environment (e.g., in a browser or a Node.js module configured as `type: \"module\"`).","error":"ReferenceError: require is not defined"}],"ecosystem":"npm"}