{"id":20174,"library":"karma-webpack","title":"karma-webpack","description":"Karma plugin that uses webpack to preprocess test files. Current stable version is 5.0.1, released February 2024, with a release cadence of roughly major versions every 1-2 years. It provides both a Karma framework and preprocessor, bundling test files and dependencies into shared bundles and chunks via webpack 5. Key differentiators: seamless integration of webpack with Karma's test runner, automatic handling of multiple outputs, and support for TypeScript out of the box. Requires webpack ^5.0.0 as a peer dependency and Node >=18.","status":"active","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/webpack-contrib/karma-webpack","tags":["javascript","webpack"],"install":[{"cmd":"npm install karma-webpack","lang":"bash","label":"npm"},{"cmd":"yarn add karma-webpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add karma-webpack","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: requires webpack ^5.0.0 for bundling","package":"webpack","optional":false}],"imports":[{"note":"Install as a dev dependency for Karma testing","wrong":"npm install karma-webpack --save","symbol":"karma-webpack","correct":"npm install karma-webpack --save-dev"},{"note":"Use 'webpack' as framework name, not 'karma-webpack'","wrong":"frameworks: ['karma-webpack']","symbol":"webpack framework","correct":"frameworks: ['webpack', ...]"},{"note":"Preprocessor name is 'webpack', not 'karma-webpack'","wrong":"preprocessors: { '**/*.test.js': ['karma-webpack'] }","symbol":"webpack preprocessor","correct":"preprocessors: { '**/*.test.js': ['webpack'] }"}],"quickstart":{"code":"// karma.conf.js\nmodule.exports = (config) => {\n  config.set({\n    frameworks: ['mocha', 'webpack'],\n    plugins: ['karma-webpack', 'karma-mocha'],\n    files: [\n      { pattern: 'test/**/*.test.js', watched: false }\n    ],\n    preprocessors: {\n      'test/**/*.test.js': ['webpack']\n    },\n    webpack: {\n      mode: 'development',\n      module: {\n        rules: [\n          { test: /\\.js$/, exclude: /node_modules/, use: 'babel-loader' }\n        ]\n      }\n    },\n    browsers: ['ChromeHeadless'],\n    singleRun: true\n  });\n};","lang":"javascript","description":"Configures Karma to use webpack as both framework and preprocessor for test files with a basic webpack setup."},"warnings":[{"fix":"Upgrade Node.js to version 18 or higher","message":"Node >= 18 required starting from v5.0.0","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Update webpack to ^5.0.0","message":"Webpack 5 peer dependency required from v5.0.0-alpha.5 onward","severity":"breaking","affected_versions":">=5.0.0-alpha.5"},{"fix":"Use webpack's built-in watch mode via Karma's autoWatch instead","message":"The .watch() method is deprecated since v5.0.0-alpha.4","severity":"deprecated","affected_versions":">=5.0.0-alpha.4"},{"fix":"Set { pattern: 'test/**/*.test.js', watched: false } in karma files config","message":"Files must set 'watched: false' to avoid conflicts with webpack's own watch","severity":"gotcha","affected_versions":"*"},{"fix":"Remove entry from webpack config; let karma-webpack handle it","message":"Do not specify webpack entry option; Karma-webpack manages entries automatically","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add 'karma-webpack' to the plugins list: plugins: ['karma-webpack', ...]","cause":"Missing 'karma-webpack' plugin in plugins array or not installed","error":"Error: No provider for \"framework:webpack\"!"},{"fix":"Run npm install webpack@^5.0.0 --save-dev","cause":"Webpack not installed or peer dependency not satisfied","error":"Error: Module not found: Error: Can't resolve 'webpack'"},{"fix":"Provide webpackMiddleware config: webpackMiddleware: { noInfo: true } or similar","cause":"webpackMiddleware config not provided or empty","error":"TypeError: Cannot read properties of undefined (reading 'length')"},{"fix":"Update webpack config to be webpack 5 compatible (e.g., use optimization.splitChunks correctly)","cause":"Webpack config contains options not compatible with webpack 5","error":"Error: [webpack-cli] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}