fuse-box

library4.0.0jsnpmunverified

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.

devops web-framework

npm install fuse-box

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FUSE-BOX

fuse-box

devopsjavascriptv4.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

fusebox

✓ import { fusebox } from 'fuse-box';

✗ const fusebox = require('fuse-box');

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.

sparky

✓ import { sparky } from 'fuse-box';

✗ const { task, exec } = require('fuse-box/sparky');

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.

WebIndexPlugin

✓ import { WebIndexPlugin } from 'fuse-box';

✗ import WebIndexPlugin from 'fuse-box/plugins/WebIndexPlugin';

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.

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.

import { fusebox, sparky } from 'fuse-box'; import * as path from 'path'; class Context { isProduction = false; getConfig() { return fusebox({ target: 'browser', entry: 'src/index.ts', output: 'dist/$name.js', homeDir: './', tsConfig: 'tsconfig.json', webIndex: { template: 'src/index.html', }, devServer: !this.isProduction, hmr: !this.isProduction, cache: true, sourceMap: true, logging: { level: 'succinct', }, watch: !this.isProduction ? ["src/**"]: [], plugins: [ // Add plugins here, e.g., CSSPlugin() ] }); } } const { task, exec, rm } = sparky(Context); task('clean', async (ctx) => { rm('./dist'); }); task('default', ['clean'], async (ctx) => { ctx.isProduction = false; const fuse = ctx.getConfig(); await fuse.runDev(); }); task('build', ['clean'], async (ctx) => { ctx.isProduction = true; const fuse = ctx.getConfig(); await fuse.runProd({ bundles: { app: 'app.js', vendor: 'vendor.js' } }); }); // To run: // 1. `npm install fuse-box typescript --save-dev` // 2. Add 'start': 'sparky' and 'build': 'sparky build' to package.json scripts // 3. Create `src/index.ts` and `src/index.html` // 4. Create `tsconfig.json` // 5. Run `npm start` for dev, `npm run build` for prod.

Debug

Known issues

breakingFuse-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.

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.

affects: >=4.0.0

breakingThe 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.

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.

affects: >=4.0.0

gotchaThe 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.

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.

affects: >=4.0.0

gotchaSource 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.

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.

affects: <4.0.0

Errors

Common errors & fixes

Error: Cannot find module 'fuse-box/sparky'

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.

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`.

SyntaxError: Unexpected token '<'

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.

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.

ReferenceError: FuseBox is not defined

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.

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.

Upgrade

Version history

4.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/fuse-box/fuse-box ↗

packagehttps://www.npmjs.com/package/fuse-box ↗

homepagehttps://fuse-box.org ↗