karma-babel-preprocessor

8.0.2 verified Sat Apr 25 auth: no javascript

Karma preprocessor to compile ES6+ on the fly with Babel. Version 8.0.2, stable, maintained as part of the Babel ecosystem. Requires @babel/core 7 as a peer dependency. Use with Babel presets to transpile modern JavaScript during test runs. Not a module bundler; for CommonJS you need a separate bundler like webpack or browserify. Key differentiator: seamless integration with Karma test runner, supports per-file Babel options via function properties.

Common errors

error Module '@babel/core' has been externalized for browser compatibility, cannot be resolved in node_modules ↓

cause Missing @babel/core dependency; or using karma-webpack with babel-loader which externalizes node_modules.

fix

Ensure @babel/core is installed: npm install @babel/core --save-dev

error Error: Cannot find module '@babel/core' ↓

cause @babel/core not installed or not in node_modules.

fix

Run: npm install @babel/core @babel/preset-env --save-dev

error Babel presets must be an array of preset names ↓

cause babelPreprocessor options not nested correctly; e.g., presets set at top level instead of inside options.

fix

Use: babelPreprocessor: { options: { presets: ['@babel/preset-env'] } }

Warnings

breaking Version 8.x drops support for Babel 6. Requires @babel/core 7 as peer dependency. ↓

fix Update to @babel/core 7 and use @babel/preset-env. If on Babel 6, stick with karma-babel-preprocessor@7.

breaking Version 7.x removed support for Babel 5. Requires babel-core 6. ↓

fix Use babel-preset-env and babel-core 6. For Babel 5, use karma-babel-preprocessor@6.

gotcha Do not preprocess all files (e.g., '**/*.js'). This includes node_modules and breaks third-party libraries like Jasmine. ↓

fix Limit preprocessor to specific paths: 'src/**/*.js', 'test/**/*.js'.

gotcha karma-babel-preprocessor only transpiles ES modules to CommonJS; it does not resolve or bundle modules. You still need a module bundler like webpack or browserify. ↓

fix Use karma-webpack + babel-loader or karma-browserify + babelify for complete module bundling.

deprecated Use of babel-polyfill is deprecated in favor of @babel/polyfill (or better, core-js/regenerator-runtime). ↓

fix Replace 'babel-polyfill' with '@babel/polyfill' or include core-js and regenerator-runtime directly.

Install

npm install karma-babel-preprocessor

yarn add karma-babel-preprocessor

pnpm add karma-babel-preprocessor

Imports

babelPreprocessor

wrong

module.exports = function(config) { config.set({ preprocessors: { '**/*.js': ['babel'] } }); };

correct

module.exports = function(config) { config.set({ babelPreprocessor: { options: { presets: ['@babel/preset-env'] } } }); };

Configuration is set via `babelPreprocessor` key in karma config. Wrong preprocessor pattern applies babel to all files including node_modules.

config.set({ preprocessors })
wrong
```
preprocessors: { '**/*.js': ['babel'] }
```
correct
```
preprocessors: { 'src/**/*.js': ['babel'] }
```
Always limit preprocessor to source files only; applying to all files breaks third-party libraries.

babelPreprocessor.options

wrong

babelPreprocessor: { presets: ['@babel/preset-env'] }

correct

babelPreprocessor: { options: { presets: ['@babel/preset-env'], sourceMap: 'inline' }, filename: function(file) { return file.originalPath; } }

Options must be nested inside `options` key. Directly setting presets at top level is not supported.

Quickstart

Installs the preprocessor and configures Karma to transpile source and test files with Babel presets.

npm install karma karma-babel-preprocessor @babel/core @babel/preset-env --save-dev

// karma.conf.js
module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    files: [
      'src/**/*.js',
      'test/**/*.js'
    ],
    preprocessors: {
      'src/**/*.js': ['babel'],
      'test/**/*.js': ['babel']
    },
    babelPreprocessor: {
      options: {
        presets: ['@babel/preset-env'],
        sourceMap: 'inline'
      }
    },
    browsers: ['ChromeHeadless']
  });
};