{"id":16857,"library":"monosize-bundler-esbuild","title":"esbuild Bundler for Monosize","description":"This package provides an `esbuild`-based bundler plugin for the `monosize` package size measurement tool. It enables `monosize` to use `esbuild` for creating optimized bundles, allowing developers to accurately assess the size implications of their code using a high-performance bundler. The current stable version is 0.3.2, and its release cadence is typically tied to updates in `monosize` or `esbuild` itself. Key differentiators include its seamless integration into the `monosize.config.mjs` setup, support for `esbuild`'s full configuration options via a callback, and optimized batch build modes for faster measurements compared to sequential builds. It leverages `esbuild`'s speed and efficiency to provide quick and reliable size reports.","status":"active","version":"0.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/microsoft/monosize","tags":["javascript","typescript"],"install":[{"cmd":"npm install monosize-bundler-esbuild","lang":"bash","label":"npm"},{"cmd":"yarn add monosize-bundler-esbuild","lang":"bash","label":"yarn"},{"cmd":"pnpm add monosize-bundler-esbuild","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a bundler plugin for `monosize` and requires it to function.","package":"monosize","optional":false},{"reason":"This package wraps `esbuild` and uses its core functionality for bundling.","package":"esbuild","optional":false}],"imports":[{"note":"The `monosize.config.mjs` file implies an ESM context, requiring `import` syntax. `esbuildBundler` is a default export.","wrong":"const esbuildBundler = require('monosize-bundler-esbuild');","symbol":"esbuildBundler","correct":"import esbuildBundler from 'monosize-bundler-esbuild';"},{"note":"The `esbuildBundler` function expects a callback that receives and returns the esbuild configuration object, not the object directly.","wrong":"import esbuildBundler from 'monosize-bundler-esbuild';\nexport default {\n  bundler: esbuildBundler({ /* esbuild config */ })\n};","symbol":"config callback","correct":"import esbuildBundler from 'monosize-bundler-esbuild';\nexport default {\n  bundler: esbuildBundler(config => { /* customize */ return config; })\n};"}],"quickstart":{"code":"import esbuildBundler from 'monosize-bundler-esbuild';\n\nexport default {\n  // Define your entry points for monosize to measure\n  fixtures: {\n    'my-component-bundle': 'src/my-component.ts',\n    'another-lib': 'src/another-lib/index.js'\n  },\n  // Configure the esbuild bundler plugin\n  bundler: esbuildBundler(config => {\n    // Example: Add a loader for SVG files if your components import them\n    config.loader = {\n      ...config.loader,\n      '.svg': 'file',\n    };\n    // Example: Define some global constants\n    config.define = {\n      ...config.define,\n      'process.env.NODE_ENV': JSON.stringify('production'),\n    };\n    // Always return the (potentially modified) config\n    return config;\n  }),\n  // Other monosize configurations...\n  output: {\n    directory: './monosize-results'\n  }\n};","lang":"typescript","description":"Shows how to configure `monosize.config.mjs` to use `monosize-bundler-esbuild`, including custom `esbuild` configuration such as adding a file loader for SVGs and defining environment variables."},"warnings":[{"fix":"Ensure your `monosize.config.js` is renamed to `monosize.config.mjs` and use `import` statements for all modules.","message":"This package is designed for an ESM context, typically used within `monosize.config.mjs`. Attempting to use CommonJS `require()` syntax may lead to module resolution errors or unexpected behavior.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Wrap your `esbuild` configuration object within a function: `esbuildBundler(config => { /* modify config */ return config; })`.","message":"The `esbuildBundler` function expects a callback function as its argument, not a direct `esbuild` configuration object. Passing an object directly will result in an error as the bundler expects to receive a function that returns the configuration.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Install `esbuild` alongside this package: `npm install esbuild --save-dev` or `yarn add esbuild --dev`.","message":"While `monosize-bundler-esbuild` provides the integration, developers are responsible for ensuring `esbuild` itself is installed as a peer dependency. Missing `esbuild` will cause runtime errors.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Run monosize with the `--build-mode=sequential` flag: `monosize measure --build-mode=sequential`.","message":"Monosize uses 'batch build mode' by default, which is faster for most scenarios. If you encounter unexpected build issues or need precise control over individual fixture builds, you might need to switch to 'sequential mode'.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure your `monosize.config.js` is named `monosize.config.mjs` and use `import esbuildBundler from 'monosize-bundler-esbuild';`.","cause":"Attempting to use `require()` for `monosize-bundler-esbuild` in a CommonJS context, or incorrect named import.","error":"TypeError: (0 , monosize_bundler_esbuild_1.default) is not a function"},{"fix":"Modify your configuration to `bundler: esbuildBundler(config => { /* ... */ return config; })`.","cause":"Passed an `esbuild` configuration object directly to `esbuildBundler` instead of a function that returns the config.","error":"Error: The bundler configuration must be a function."},{"fix":"Install `esbuild` as a development dependency: `npm install esbuild --save-dev` or `yarn add esbuild --dev`.","cause":"The `esbuild` package is not installed in your project.","error":"Error: Cannot find module 'esbuild'"}],"ecosystem":"npm","meta_description":null}