webpack-jarvis

0.3.2 verified Sat Apr 25 auth: no javascript deprecated

A webpack dashboard that runs in the browser, providing real-time insights into your build process including ES harmony module counts, asset performance across connection types, and beautified error output with Google/Stackoverflow search. Current version 0.3.2 (beta), last updated in 2018, with no active development. It uses a Preact-based client, Socket.IO for real-time communication, and a Polka server. Unlike other webpack dashboards, it offers unique features like treeshakability analysis and integrated error search. Requires webpack as a peer dependency.

Common errors

error Error: Cannot find module 'webpack-jarvis' ↓

cause Package not installed or not in node_modules.

fix

Run 'npm install --save-dev webpack-jarvis'.

error TypeError: Jarvis is not a constructor ↓

cause Missing 'new' keyword when instantiating.

fix

Use 'new Jarvis(...)' in plugins array.

error Module parse failed: Unexpected token (1:0) - You may need an appropriate loader to handle this file type. ↓

cause Jarvis client code uses JSX/ES6+; requires correct webpack configuration.

fix

Ensure Babel is configured in your webpack setup (unlikely if project is already standard).

Warnings

deprecated Package is in beta and no longer maintained; consider alternatives like webpack-bundle-analyzer. ↓

fix Migrate to webpack-bundle-analyzer or others.

gotcha Only works with webpack 4 and below; not compatible with webpack 5. ↓

fix Use webpack 4 or switch to a compatible dashboard.

gotcha watchOnly defaults to true, so Jarvis will not run for single builds; set to false if needed. ↓

fix Explicitly set watchOnly: false for non-watch builds.

gotcha Running multiple instances may cause port conflicts if not configured differently. ↓

fix Assign unique ports via the 'port' option.

Install

npm install webpack-jarvis

yarn add webpack-jarvis

pnpm add webpack-jarvis

Imports

Jarvis

wrong

import Jarvis from 'webpack-jarvis';

correct

const Jarvis = require('webpack-jarvis');

Package is CJS-only; ESM import may fail in Node.js environments.

Jarvis

wrong

plugins: [Jarvis({ port: 1337 })]

correct

plugins: [new Jarvis({ port: 1337 })]

Must be instantiated with 'new' as it is a class.

Jarvis

wrong

const { Jarvis } = require('webpack-jarvis');

correct

const Jarvis = require('webpack-jarvis');

Export is a single class, not named export.

Quickstart

Configures Jarvis as a webpack plugin with all options, enabling the browser dashboard on localhost:1337 during development.

// webpack.config.js
const path = require('path');
const Jarvis = require('webpack-jarvis');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new Jarvis({
      port: 1337,
      host: 'localhost',
      watchOnly: true,
      packageJsonPath: process.cwd(),
    }),
  ],
};