devtools-ignore-webpack-plugin

0.2.0 verified Sat Apr 25 auth: no javascript

A Webpack 5 plugin (v0.2.0, latest) that adds `x_google_ignoreList` to sourcemaps, allowing Chrome DevTools to hide library/framework code from the call stack. Low release cadence, only two commits. Differentiators: small, focused, no dependencies beyond Webpack 5 peer dependency. Originally extracted from Angular CLI. Requires sourcemaps enabled (inline not supported). Ships TypeScript types. Node >=16.14.2 required.

Common errors

error Cannot find module 'devtools-ignore-webpack-plugin' ↓

cause Package not installed or installed as devDependency but not in node_modules.

fix

npm install --save-dev devtools-ignore-webpack-plugin

error TypeError: devtoolsIgnorePlugin is not a constructor ↓

cause Importing as named export instead of default.

fix

Use: const DevToolsIgnorePlugin = require('devtools-ignore-webpack-plugin');

error Module not found: Error: Can't resolve 'webpack' ↓

cause Webpack 5 not installed as peer dependency.

fix

npm install --save-dev webpack@5

Warnings

gotcha Inline sourcemap options (e.g., 'inline-source-map') are not supported and will silently fail to add ignore list. ↓

fix Use a non-inline devtool like 'source-map' or 'hidden-source-map'.

breaking Webpack 4 is not supported; plugin only works with Webpack 5. ↓

fix Upgrade to Webpack 5.

gotcha Plugin does nothing if devtool is not set or set to false; no error is thrown. ↓

fix Ensure devtool is set to a non-inline sourcemap option.

deprecated Currently no deprecated features; stability is low. ↓

fix Not applicable.

Install

npm install devtools-ignore-webpack-plugin

yarn add devtools-ignore-webpack-plugin

pnpm add devtools-ignore-webpack-plugin

Imports

DevToolsIgnorePlugin

wrong

import DevToolsIgnorePlugin from 'devtools-ignore-webpack-plugin';

correct

const DevToolsIgnorePlugin = require('devtools-ignore-webpack-plugin');

Package does not export ES module; use CommonJS require.

DevToolsIgnorePlugin

wrong

import DevToolsIgnorePlugin from 'devtools-ignore-webpack-plugin';

correct

import DevToolsIgnorePlugin = require('devtools-ignore-webpack-plugin');

TypeScript users must use `import = require` for CJS modules.

DevToolsIgnorePlugin

wrong

const DevToolsIgnorePlugin = require('devtools-ignore-webpack-plugin').DevToolsIgnorePlugin;

correct

const { DevToolsIgnorePlugin } = require('devtools-ignore-webpack-plugin');

Plugin is default export, not named export. No named export exists.

Quickstart

Shows basic setup: import plugin, add to webpack config with devtool, enable sourcemaps, and customize ignore filters.

const DevToolsIgnorePlugin = require('devtools-ignore-webpack-plugin');

module.exports = {
  // Enable sourcemaps (inline not supported)
  devtool: 'source-map',
  plugins: [
    new DevToolsIgnorePlugin({
      shouldIgnorePath: (path) => {
        // Ignore all node_modules and webpack bootstrap
        return path.includes('/node_modules/') || path.includes('/webpack/');
      },
      isSourceMapAsset: (name) => name.endsWith('.map'),
    }),
  ],
};