vconsole-webpack-plugin

1.8.0 verified Sat Apr 25 auth: no javascript maintenance

Webpack plugin that automatically injects vConsole (a mobile web debug panel) into webpack bundles. Current stable version is 1.8.0. The plugin wraps vConsole as a webpack plugin to simplify integration during development and ensure removal in production via a simple enable flag. Key differentiator: zero manual script injection, configurable via webpack config, supports entry filtering and conditional enabling based on CLI arguments. Releases are infrequent, last updated in 2019.

Common errors

error Error: Cannot find module 'vconsole-webpack-plugin' ↓

cause Package not installed or installed as devDependency but required at runtime in a script that doesn't include node_modules.

fix

Ensure the package is listed in devDependencies and run 'npm install' in the correct directory.

error TypeError: vConsolePlugin is not a constructor ↓

cause Incorrect import: using named import { vConsolePlugin } instead of default import.

fix

Use 'const vConsolePlugin = require("vconsole-webpack-plugin");'

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

cause The plugin might try to inject ES6 module syntax but webpack is not configured to handle it (e.g., no babel-loader for node_modules).

fix

If the plugin source is included in the bundle, ensure webpack can transpile ES6 modules, or add node_modules to babel-loader exclusion? Actually, the plugin should work OOTB; this error may happen if the plugin's distributed files are not CommonJS. Reinstall or use a different version.

Warnings

gotcha enable defaults to true if not set, so vConsole will be injected in production builds if omitted. ↓

fix Always explicitly set enable: process.env.NODE_ENV !== 'production' or similar.

gotcha This plugin is outdated; vConsole has since moved to v3 with breaking changes, but the plugin may not be compatible. ↓

fix Check vConsole version compatibility; consider using vConsole CDN script directly for newer versions.

gotcha In webpack 5+ the plugin may not work correctly due to API changes. ↓

fix Use with webpack 4 or manually adjust the plugin's integration; for webpack 5 consider alternative solutions.

Install

npm install vconsole-webpack-plugin

yarn add vconsole-webpack-plugin

pnpm add vconsole-webpack-plugin

Imports

default
wrong
```
import vConsolePlugin from 'vconsole-webpack-plugin';
```
correct
```
const vConsolePlugin = require('vconsole-webpack-plugin');
```
This package does not ship ESM, so using ES import will fail unless transpiled with a bundler or use with Node ESM interop.

vConsolePlugin

wrong

require('vconsole-webpack-plugin').default;

correct

const vConsolePlugin = require('vconsole-webpack-plugin');

The export is directly the constructor, not a default property on an object.

vConsolePlugin

wrong

import { vConsolePlugin } from 'vconsole-webpack-plugin';

correct

import vConsolePlugin from 'vconsole-webpack-plugin';

Named import is incorrect; the package exports a single default entity.

Quickstart

Demonstrates how to configure vconsole-webpack-plugin in webpack.config.js, enabling it only in non-production environments with optional entry filtering.

// webpack.config.js
const vConsolePlugin = require('vconsole-webpack-plugin');
const isDebug = process.env.NODE_ENV !== 'production';

module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' },
  plugins: [
    new vConsolePlugin({
      enable: isDebug,
      filter: [] // optional: array of entry file names to exclude
    })
  ]
};