{"id":15599,"library":"eleventy-plugin-smol-jsx-bundler","title":"Eleventy Plugin for JSX Bundling","description":"eleventy-plugin-smol-jsx-bundler is an Eleventy plugin designed to bring robust bundling capabilities to projects leveraging JSX, React, Preact, or MDX. It currently stands at version 1.2.9 and provides a lightweight, pure JavaScript approach to managing CSS, JavaScript, or HTML bundles within an Eleventy site, conceptually mirroring Eleventy's built-in bundler but with direct support for JSX syntax. This plugin allows developers to embed bundle content directly within JSX or MDX components using functions like `bundle()`, `getBundle()`, and `getBundleFile()`, offering an integrated workflow for modern frontend development within Eleventy. Its key differentiators include enabling easily unit-testable JSX files, greater extensibility, and features like deduplication of bundle content. It also supports post-processing of bundles with external tools such as PostCSS, providing flexibility for complex build pipelines. While it doesn't specify a strict release cadence, its 1.x versioning suggests a stable API and active maintenance.","status":"active","version":"1.2.9","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","eleventy","plugin","bundler","jsx","react","preact","typescript"],"install":[{"cmd":"npm install eleventy-plugin-smol-jsx-bundler","lang":"bash","label":"npm"},{"cmd":"yarn add eleventy-plugin-smol-jsx-bundler","lang":"bash","label":"yarn"},{"cmd":"pnpm add eleventy-plugin-smol-jsx-bundler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is an Eleventy plugin and requires Eleventy to function. It interacts directly with the Eleventy configuration API.","package":"@11ty/eleventy","optional":false}],"imports":[{"note":"Used for registering the plugin in your `.eleventy.js` configuration file, which typically uses ES Modules syntax for modern Eleventy setups.","wrong":"const jsxBundle = require('eleventy-plugin-smol-jsx-bundler');","symbol":"jsxBundle","correct":"import jsxBundle from 'eleventy-plugin-smol-jsx-bundler';"},{"note":"Used within your JSX/MDX templates to add content to a bundle. This is a named export.","wrong":"import bundle from 'eleventy-plugin-smol-jsx-bundler';","symbol":"bundle","correct":"import { bundle } from 'eleventy-plugin-smol-jsx-bundler';"},{"note":"Used within your JSX/MDX templates or layouts to retrieve the combined content of a specific bundle type (e.g., 'css', 'js') for inline rendering.","wrong":"import { getBundle as retrieveBundle } from 'eleventy-plugin-smol-jsx-bundler';","symbol":"getBundle","correct":"import { getBundle } from 'eleventy-plugin-smol-jsx-bundler';"},{"note":"Used to generate a content-hashed file and retrieve its URL for linking external assets. Requires specifying the bundle type and file extension.","wrong":"const getBundleFile = require('eleventy-plugin-smol-jsx-bundler').getBundleFile;","symbol":"getBundleFile","correct":"import { getBundleFile } from 'eleventy-plugin-smol-jsx-bundler';"}],"quickstart":{"code":"// .eleventy.js\nimport jsxBundle from 'eleventy-plugin-smol-jsx-bundler';\nimport postcss from 'postcss';\nimport postcssNested from 'postcss-nested';\n\nexport default async (eleventyConfig) => {\n  eleventyConfig.addPlugin(jsxBundle);\n\n  // Example: Add a PostCSS filter to process CSS bundles\n  eleventyConfig.addFilter('postcss', async (content) => {\n    if (!content) return content;\n    const result = await postcss([postcssNested]).process(content, { from: undefined });\n    return result.css;\n  });\n  // Apply this filter to all 'css' bundles\n  eleventyConfig.addTransform('css', 'postcss');\n};\n\n// src/index.tsx (or .mdx)\nimport { bundle, getBundle, getBundleFile } from 'eleventy-plugin-smol-jsx-bundler';\n\n// Bundle some CSS specific to this page\nbundle('css', `\n  .page-header {\n    font-family: sans-serif;\n    color: #333;\n\n    &__title {\n      font-size: 2em;\n      text-decoration: underline;\n    }\n  }\n`);\n\n// You can also bundle JavaScript, e.g., for interactivity\nbundle('js', `\n  console.log(\"Hello from Smol JSX Bundler!\");\n  document.addEventListener('DOMContentLoaded', () => {\n    const button = document.getElementById('myButton');\n    if (button) {\n      button.addEventListener('click', () => alert('Button clicked!'));\n    }\n  });\n`);\n\nconst MyPage = (props) => {\n  return (\n    <html lang=\"en\">\n      <head>\n        <meta charset=\"UTF-8\" />\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n        <title>My Smol JSX Bundler Page</title>\n        {/* Render inline CSS from the bundle */}\n        <style dangerouslySetInnerHTML={{ __html: getBundle('css') }} />\n        {/* Or link to a content-hashed CSS file */}\n        <link rel=\"stylesheet\" href={getBundleFile('css', 'css')} />\n      </head>\n      <body>\n        <header className=\"page-header\">\n          <h1 className=\"page-header__title\">Welcome to Eleventy with JSX!</h1>\n        </header>\n        <main>\n          {/* Render page content, typically from markdown or other templating */}\n          <div dangerouslySetInnerHTML={{ __html: props.content }} />\n          <button id=\"myButton\">Click Me</button>\n        </main>\n        <footer>\n          <p>&copy; 2023 My Site</p>\n        </footer>\n        {/* Render inline JS from the bundle */}\n        <script dangerouslySetInnerHTML={{ __html: getBundle('js') }} />\n        {/* Or link to a content-hashed JS file */}\n        <script src={getBundleFile('js', 'js')}></script>\n      </body>\n    </html>\n  );\n};\n\nexport const render = (props) => {\n  return <MyPage content={props.content} />;\n};","lang":"typescript","description":"This quickstart demonstrates how to configure the `eleventy-plugin-smol-jsx-bundler` in `.eleventy.js` and then use `bundle`, `getBundle`, and `getBundleFile` within a JSX template to manage both inline and external CSS/JS assets, including post-processing with PostCSS."},"warnings":[{"fix":"Ensure your `.eleventy.js` is named `.eleventy.cjs` or define `\"type\": \"module\"` in your `package.json` for ES Module support, and use `import` statements for plugin registration.","message":"Eleventy configuration files often need to be set up for ES Modules (using `import`/`export`) to correctly import and use modern plugins like `eleventy-plugin-smol-jsx-bundler`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If stricter scoping is required, consider using unique bundle type names (e.g., 'page-css', 'component-css') or applying more advanced Eleventy transforms to process and scope the output.","message":"Bundles created with `bundle()` are currently global to the entire Eleventy build process for a given type (e.g., 'css', 'js'). Be mindful of potential naming collisions if different components or pages try to define bundles of the same type with conflicting content, or if you expect isolated component-level bundling.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Locate and replace all instances of Eleventy's native bundle shortcodes with `import { bundle } from 'eleventy-plugin-smol-jsx-bundler'; bundle('type', 'content');` and update rendering logic to use `getBundle('type')` or `getBundleFile('type', 'ext')`.","message":"When migrating from Eleventy's built-in bundler to `eleventy-plugin-smol-jsx-bundler`, ensure all `{% css %}`/`{% js %}` shortcodes are replaced with the equivalent `bundle()` function calls in your JSX/MDX templates.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"If your `.eleventy.js` is an ES Module, use `import jsxBundle from 'eleventy-plugin-smol-jsx-bundler';`. If it's CommonJS, ensure the plugin itself supports CJS (though this one is primarily ESM-first) or configure Eleventy for ESM.","cause":"Attempting to import the plugin using CommonJS `require()` syntax in an environment configured for ES Modules, or vice-versa.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module path/to/eleventy-plugin-smol-jsx-bundler.js Not supported."},{"fix":"Ensure your `.eleventy.js` file exports a default async function `export default async (eleventyConfig) => { ... }` as shown in the quickstart, and that `eleventyConfig` is the first parameter.","cause":"The `eleventyConfig` object was not correctly passed to or recognized by your Eleventy configuration function, or the function is not exported correctly.","error":"TypeError: Cannot read properties of undefined (reading 'addPlugin')"},{"fix":"Add `import { bundle, getBundle, getBundleFile } from 'eleventy-plugin-smol-jsx-bundler';` to the top of any JSX/MDX template or component file where these functions are used.","cause":"The `bundle`, `getBundle`, or `getBundleFile` functions were used in a template without being explicitly imported from `eleventy-plugin-smol-jsx-bundler`.","error":"ReferenceError: bundle is not defined"}],"ecosystem":"npm"}