{"id":13207,"library":"fuse-box","title":"Fuse-Box: Fast JavaScript and TypeScript Bundler","description":"Fuse-Box is a JavaScript and TypeScript module bundler known for its focus on speed, simplicity, and extensibility through a plugin system. Version 4.0.0, released in 2019, introduced significant architectural changes, most notably a shift from JavaScript-based configuration files (e.g., `fbx_switch.js`) to XML-based configuration (`fusebox.xml` and `circuit.xml`) for defining application circuits and parameters. It supports features like TypeScript compilation by default, a powerful caching system, zero-configuration code splitting, Hot Module Replacement (HMR), and an integrated task runner (Sparky). While it aimed to be a simpler alternative to Webpack for application bundling, the project appears to be no longer actively maintained, with its last npm publish in December 2020 and its GitHub repository archived in June 2023.","status":"abandoned","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/fuse-box/fuse-box","tags":["javascript","typescript"],"install":[{"cmd":"npm install fuse-box","lang":"bash","label":"npm"},{"cmd":"yarn add fuse-box","lang":"bash","label":"yarn"},{"cmd":"pnpm add fuse-box","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"While CommonJS `require` can work, ESM `import` is the idiomatic way for modern Node.js environments and is shown in v4 examples. The `fusebox` function is the main entry point for configuration.","wrong":"const fusebox = require('fuse-box');","symbol":"fusebox","correct":"import { fusebox } from 'fuse-box';"},{"note":"Sparky is Fuse-Box's integrated task runner. Its API underwent changes in v4; direct import from 'fuse-box/sparky' might be a v3 pattern. The v4 documentation suggests importing `sparky` directly from 'fuse-box' and then destructuring task methods from the `sparky(Context)` call.","wrong":"const { task, exec } = require('fuse-box/sparky');","symbol":"sparky","correct":"import { sparky } from 'fuse-box';"},{"note":"Plugins are typically named imports from the main `fuse-box` package in v4. Direct path imports to specific plugins might be a v3 pattern or incorrect for v4.","wrong":"import WebIndexPlugin from 'fuse-box/plugins/WebIndexPlugin';","symbol":"WebIndexPlugin","correct":"import { WebIndexPlugin } from 'fuse-box';"}],"quickstart":{"code":"import { fusebox, sparky } from 'fuse-box';\nimport * as path from 'path';\n\nclass Context {\n  isProduction = false;\n  getConfig() {\n    return fusebox({\n      target: 'browser',\n      entry: 'src/index.ts',\n      output: 'dist/$name.js',\n      homeDir: './',\n      tsConfig: 'tsconfig.json',\n      webIndex: {\n        template: 'src/index.html',\n      },\n      devServer: !this.isProduction,\n      hmr: !this.isProduction,\n      cache: true,\n      sourceMap: true,\n      logging: {\n        level: 'succinct',\n      },\n      watch: !this.isProduction ? [\"src/**\"]: [],\n      plugins: [\n        // Add plugins here, e.g., CSSPlugin()\n      ]\n    });\n  }\n}\n\nconst { task, exec, rm } = sparky(Context);\n\ntask('clean', async (ctx) => {\n  rm('./dist');\n});\n\ntask('default', ['clean'], async (ctx) => {\n  ctx.isProduction = false;\n  const fuse = ctx.getConfig();\n  await fuse.runDev();\n});\n\ntask('build', ['clean'], async (ctx) => {\n  ctx.isProduction = true;\n  const fuse = ctx.getConfig();\n  await fuse.runProd({\n    bundles: {\n      app: 'app.js',\n      vendor: 'vendor.js'\n    }\n  });\n});\n\n// To run:\n// 1. `npm install fuse-box typescript --save-dev`\n// 2. Add 'start': 'sparky' and 'build': 'sparky build' to package.json scripts\n// 3. Create `src/index.ts` and `src/index.html`\n// 4. Create `tsconfig.json`\n// 5. Run `npm start` for dev, `npm run build` for prod.\n","lang":"typescript","description":"This quickstart demonstrates a basic Fuse-Box v4 setup for a TypeScript project, including development server, HMR, and production build tasks using the integrated Sparky runner. It showcases modular configuration and task execution."},"warnings":[{"fix":"Migrate your project configuration to the new XML format. Consult the official Fuse-Box v4 documentation for details on `fusebox.xml` and `circuit.xml` structure.","message":"Fuse-Box v4.0.0 fundamentally changed its configuration approach, moving from JavaScript-based `fbx_switch`, `fbx_settings`, and `fbx_circuits` files to XML files (`fusebox.xml` and `circuit.xml`). Existing v3 configurations are not compatible and require a complete rewrite.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Review your Sparky tasks and update them to the v4 API, typically importing `sparky` from 'fuse-box' directly and utilizing its context-based task definitions.","message":"The API for the integrated task runner, Sparky, was modified in v4. Older task definitions and import patterns (e.g., `require('fuse-box/sparky')`) may no longer function as expected.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Consider migrating to an actively maintained bundler like Webpack, Rollup, or Vite for new projects or existing projects requiring ongoing support and security patching.","message":"The Fuse-Box project is no longer actively maintained. The last npm package update was in December 2020, and the GitHub repository was archived in June 2023, making it read-only. This means no further bug fixes, security updates, or new features will be provided.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Ensure source map generation is enabled in your `fusebox` configuration. For complex setups, custom `sourceMap` configurations or external source map tools might be required, though official support is now absent.","message":"Source maps and debugging experience, especially with frameworks like React, could be inconsistent or difficult in earlier versions of Fuse-Box, potentially showing incorrect line numbers or mangled variable names in development tools.","severity":"gotcha","affected_versions":"<4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use the v4 import syntax: `import { sparky } from 'fuse-box';` and then destructure task methods from the `sparky(Context)` call. Ensure your project is configured for ESM if using `import`.","cause":"Attempting to import Sparky directly from a submodule path which was valid in v3 but changed in v4, or attempting to use a CommonJS `require` syntax in an ES Module context.","error":"Error: Cannot find module 'fuse-box/sparky'"},{"fix":"Verify your `fusebox.xml` and `circuit.xml` files are correctly structured according to v4 documentation. Ensure necessary plugins (e.g., `WebIndexPlugin` if dealing with HTML) are configured, especially if the file is an entry point or template.","cause":"This error typically occurs when Fuse-Box, or a loader, tries to parse an HTML or XML file as JavaScript, often due to incorrect file type handling or missing plugins for the new v4 XML configuration.","error":"SyntaxError: Unexpected token '<'"},{"fix":"Always import the `fusebox` function explicitly: `import { fusebox } from 'fuse-box';` and use it to create a new instance (e.g., `fusebox({...})`). Avoid relying on global variables.","cause":"Using global `FuseBox` object which might have been available in older versions or specific bundle targets, but is not exposed in v4's modern module output, or incorrect import of the `fusebox` function.","error":"ReferenceError: FuseBox is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}