{"id":15620,"library":"fsbx","title":"FuseBox Bundler","description":"FuseBox is a JavaScript module bundler and loader that gained traction for its speed and 'zero configuration' approach to common tasks, especially with TypeScript. It previously offered features like Hot Module Replacement (HMR), a development server, and built-in Rollup support. The project released its v4.0.0 version, which notably shifted its configuration paradigm from programmatic JavaScript/TypeScript files to an XML-based system using `fusebox.xml` and `circuit.xml` files. However, the `fuse-box` GitHub repository was archived by its owner on June 20, 2023, and is now read-only. This indicates that while FuseBox v4 exists, it is no longer actively maintained or developed, and the project is considered abandoned. During its active development, key differentiators included reported blazing fast bundle times (50-100ms rebuilds), first-class TypeScript support without extensive configuration, and a comprehensive loader API supporting 'arithmetic instructions' and wildcard imports.","status":"abandoned","version":"2.1.0-beta.4","language":"javascript","source_language":"en","source_url":"https://github.com/fuse-box/fuse-box","tags":["javascript","typescript"],"install":[{"cmd":"npm install fsbx","lang":"bash","label":"npm"},{"cmd":"yarn add fsbx","lang":"bash","label":"yarn"},{"cmd":"pnpm add fsbx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Commonly installed as a development dependency for projects using FuseBox with TypeScript source code.","package":"typescript","optional":true}],"imports":[{"note":"Configuration files are primarily CommonJS (Node.js) using `require` for instantiating the bundler, especially in v3. While ES module `import` might be used in application code, the bundler configuration itself typically uses `require`.","wrong":"import { FuseBox } from 'fuse-box';","symbol":"FuseBox","correct":"const { FuseBox } = require('fuse-box');"},{"note":"Plugins are exposed as named exports from the main `fuse-box` package. The `plugins` directory is not typically imported directly.","wrong":"import WebIndexPlugin from 'fuse-box/plugins/WebIndexPlugin';","symbol":"WebIndexPlugin","correct":"const { WebIndexPlugin } = require('fuse-box');"}],"quickstart":{"code":"import { FuseBox, WebIndexPlugin, CSSPlugin, QuantumPlugin } from \"fuse-box\";\nimport * as path from \"path\";\n\nasync function bundleApp() {\n    const isProduction = process.env.NODE_ENV === \"production\";\n\n    const fuse = FuseBox.init({\n        homeDir: \"src\", // Your source code directory\n        output: \"dist/$name.js\", // Output bundled files to dist/\n        target: \"browser\", // Target browser environment\n        hash: isProduction, // Add hash to filenames in production\n        plugins: [\n            CSSPlugin(), // Process CSS files\n            WebIndexPlugin({ template: \"src/index.html\" }), // Generate index.html\n            isProduction && QuantumPlugin({\n                uglify: true, // Minify JavaScript\n                css: true, // Minify CSS\n            }),\n        ].filter(Boolean),\n        log: !isProduction,\n        debug: !isProduction,\n    });\n\n    // Setup development server with HMR for non-production builds\n    if (!isProduction) {\n        fuse.dev({ port: 4444, httpServer: true });\n        fuse.bundle(\"app\")\n            .instructions(`>index.ts`) // Entry point\n            .hmr() // Enable Hot Module Reloading\n            .watch(); // Watch for changes\n    } else {\n        // Production bundle\n        fuse.bundle(\"app\")\n            .instructions(`>index.ts`);\n    }\n\n    await fuse.run();\n    console.log(\"FuseBox bundling complete!\");\n}\n\nbundleApp().catch(console.error);\n\n// To make this runnable, ensure you have:\n// 1. A 'src' directory with 'index.ts' (e.g., console.log(\"Hello from FuseBox!\");)\n// 2. A 'src/index.html' (e.g., <body><div id=\"root\"></div></body>)\n// 3. Run with `NODE_ENV=development ts-node fuse.ts` or `NODE_ENV=production ts-node fuse.ts`\n","lang":"typescript","description":"This quickstart demonstrates how to configure FuseBox for a basic TypeScript project, including setting up a development server with Hot Module Replacement (HMR) and a production build with minification and HTML generation. This configuration style is typical for FuseBox v3.x."},"warnings":[{"fix":"Migrate to an actively maintained bundler like Webpack, Rollup, Parcel, or Vite.","message":"The FuseBox project's official GitHub repository (`fuse-box/fuse-box`) was archived on June 20, 2023, and is now read-only. This signifies that the project is no longer actively maintained or developed, and no further updates, bug fixes, or security patches will be released. Users should consider migrating to actively maintained alternatives.","severity":"breaking","affected_versions":">=3.7.1"},{"fix":"Rewrite your FuseBox configuration using the new XML schema as described in the v4 documentation, or stick to FuseBox v3.x and consider migration due to project abandonment.","message":"FuseBox v4.0.0 introduced a fundamental shift in configuration, moving from programmatic JavaScript/TypeScript files (like `fbx_switch.js`) to an XML-based system, requiring `fusebox.xml` and `circuit.xml` files. This is a significant breaking change; existing v3 configurations are incompatible with v4.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Refer to the `engines` field in `package.json` for compatible Node.js versions. For abandoned software, it's safer to use the Node.js version contemporary with its last active development.","message":"Older Node.js versions might not be compatible. The `package.json` specifies `\"node\": \">= 6.9.5\"`, but due to project abandonment and lack of updates, newer Node.js versions might introduce unforeseen compatibility issues.","severity":"gotcha","affected_versions":"<=3.x"},{"fix":"Carefully review changelogs for minor versions before upgrading and test thoroughly, especially concerning network and stream-related functionalities.","message":"Some internal polyfills have changed in minor versions (e.g., `stream-browserify` was added, `uws` was replaced with `ws`). If your application relied on specific behaviors or had conflicts with these polyfills, updates could introduce subtle bugs.","severity":"gotcha","affected_versions":">=3.2.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Upgrade to FuseBox v3.2.2 or later, which includes a fix for this issue.","cause":"A bug in FuseBox's UMD build output.","error":"Missing semicolon messed up with UMD init"},{"fix":"Upgrade to FuseBox v3.7.0 or later to get the fix for the domain polyfill syntax error.","cause":"An incorrect syntax within the domain polyfill bundled by FuseBox.","error":"Domain polyfill syntax error"},{"fix":"Upgrade to FuseBox v3.6.0 or later, which includes a fix for `process` and `process.env` handling in Quantum builds.","cause":"Older versions of FuseBox's Quantum plugin might not correctly handle global `process` or `process.env` variables during optimization, leading to runtime errors in client-side bundles.","error":"ReferenceError: process is not defined (during Quantum build)"},{"fix":"Upgrade to FuseBox v3.2.2 or later, which includes fixes for CSSResourcePlugin path issues on Windows. Ensure consistent path separators in your configuration.","cause":"Path handling inconsistencies, particularly with backslashes on Windows, affecting resource resolution in CSS.","error":"CSSResourcePlugin backslashes fixes on Windows 10 (or similar path issues)"}],"ecosystem":"npm"}