{"id":20650,"library":"vconsole-webpack-plugin","title":"vconsole-webpack-plugin","description":"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.","status":"maintenance","version":"1.8.0","language":"javascript","source_language":"en","source_url":"https://github.com/diamont1001/vconsole-webpack-plugin","tags":["javascript","webpack","plugin","webpack-plugin","vConsole","vconsole"],"install":[{"cmd":"npm install vconsole-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add vconsole-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add vconsole-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"vConsole is bundled? No, but the plugin expects vConsole to be available at runtime if not injected as source.","package":"vconsole","optional":true}],"imports":[{"note":"This package does not ship ESM, so using ES import will fail unless transpiled with a bundler or use with Node ESM interop.","wrong":"import vConsolePlugin from 'vconsole-webpack-plugin';","symbol":"default","correct":"const vConsolePlugin = require('vconsole-webpack-plugin');"},{"note":"The export is directly the constructor, not a default property on an object.","wrong":"require('vconsole-webpack-plugin').default;","symbol":"vConsolePlugin","correct":"const vConsolePlugin = require('vconsole-webpack-plugin');"},{"note":"Named import is incorrect; the package exports a single default entity.","wrong":"import { vConsolePlugin } from 'vconsole-webpack-plugin';","symbol":"vConsolePlugin","correct":"import vConsolePlugin from 'vconsole-webpack-plugin';"}],"quickstart":{"code":"// webpack.config.js\nconst vConsolePlugin = require('vconsole-webpack-plugin');\nconst isDebug = process.env.NODE_ENV !== 'production';\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: { filename: 'bundle.js' },\n  plugins: [\n    new vConsolePlugin({\n      enable: isDebug,\n      filter: [] // optional: array of entry file names to exclude\n    })\n  ]\n};","lang":"javascript","description":"Demonstrates how to configure vconsole-webpack-plugin in webpack.config.js, enabling it only in non-production environments with optional entry filtering."},"warnings":[{"fix":"Always explicitly set enable: process.env.NODE_ENV !== 'production' or similar.","message":"enable defaults to true if not set, so vConsole will be injected in production builds if omitted.","severity":"gotcha","affected_versions":"all"},{"fix":"Check vConsole version compatibility; consider using vConsole CDN script directly for newer versions.","message":"This plugin is outdated; vConsole has since moved to v3 with breaking changes, but the plugin may not be compatible.","severity":"gotcha","affected_versions":"current (1.8.0)"},{"fix":"Use with webpack 4 or manually adjust the plugin's integration; for webpack 5 consider alternative solutions.","message":"In webpack 5+ the plugin may not work correctly due to API changes.","severity":"gotcha","affected_versions":">=1.8.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure the package is listed in devDependencies and run 'npm install' in the correct directory.","cause":"Package not installed or installed as devDependency but required at runtime in a script that doesn't include node_modules.","error":"Error: Cannot find module 'vconsole-webpack-plugin'"},{"fix":"Use 'const vConsolePlugin = require(\"vconsole-webpack-plugin\");'","cause":"Incorrect import: using named import { vConsolePlugin } instead of default import.","error":"TypeError: vConsolePlugin is not a constructor"},{"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.","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).","error":"Module parse failed: Unexpected token (1:0) - You may need an appropriate loader to handle this file type."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}