webpackJsonp not defined using karma-webpack?

Question

I am building a boilerplate with webpack and karma with mocha.

This is the configuration I am using for karma-webpack. I am new to webpack.

var path          = require('path');
var webpack = require('webpack');
var entries =  {
  "app": ["./index.js"]
};
var root            = './';
var testSrc         = path.join(root, 'tests/');
var jsSrc           = path.join(root, 'src/javascripts/');
var publicPath      = path.join(root , 'public/');
var filenamePattern = 'index.js';
var extensions      = ['js'].map(function(extension) {
  return '.' + extension;
});


var webpackConfig = {
  context: jsSrc,
  resolve: {
    root: jsSrc,
    extensions: [''].concat(extensions)
  },
  resolveLoader: {
    root: path.join(__dirname, "node_modules")
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }]
  },
  entry: entries,
  output: {
    filename: filenamePattern,
    publicPath: publicPath
  },
  plugins: [new webpack.optimize.CommonsChunkPlugin({
    name: 'shared',
    filename: filenamePattern,
  })]
};

var karmaConfig = {
  frameworks: ['mocha'],
  files: ['tests/test-index.js'],
  preprocessors: {
    'tests/**/*.js': ['webpack']
  },
  webpack: webpackConfig,
  webpackMiddleware: {
    noInfo: true,
  },
  singleRun: false,
  autoWatch: true,
  colors: true,
  reporters: ['nyan'],
  browsers: ['Chrome'],
  plugins: [
    require("karma-nyan-reporter"),
    require("karma-mocha"),
    require("karma-firefox-launcher"),
    require("karma-webpack"),
    require("karma-chrome-launcher")
  ]
};
module.exports = function(config) {
  config.set(karmaConfig);
};

When I run karma start karma.local.conf.js it does not execute the tests becouse it says in the browser webpackJsonp is not defined. I was wondering if I am missing something in this configuration.

Answer 1

You can solve this problem by changing the order of your files loaded into your Karma browser.

karma.conf.js

files: [
            'build/shared.js',
            'build/**/*.js',
        ]

Shared (in my case) is the file where "webpackJsonp" is defined. By putting this one at the top of the files it will be loaded before the other js files. Solving the error.

Answer 2

I had also same problem coming in Browser in my Asp.Net MVC 5 based web application:

"webpackJsonp is not defined"

although I am not using Karma. The solution I found was to move the commons chunk file to normal script tag based inclusion. I was earlier loading this file via Asp.Net MVC's bundling BundleConfig.cs file. I guess sometimes for some unknown reason this commons chunk file loads after my other module files and thus Browser complaints.

I removed the commons.chunk.js inclusion from BundleConfig.cs and added it to page using a normal script tag, right before my bundle class:

<script type="text/javascript" src="@Url.Content("~/Scripts/build/commons.chunk.js")"></script>
@Scripts.Render("~/bundles/myModules")

Answer 3

After doing some research on why or how this problem was happening I found out that there is a plugin of web pack messing with karma.

So the configuration result would be:

var path          = require('path');
var webpack = require('webpack');
var entries =  {
  "app": ["./index.js"]
};
var root            = './';
var testSrc         = path.join(root, 'tests/');
var jsSrc           = path.join(root, 'src/javascripts/');
var publicPath      = path.join(root , 'public/');
var filenamePattern = 'index.js';
var extensions      = ['js'].map(function(extension) {
  return '.' + extension;
});


var webpackConfig = {
  context: jsSrc,
  resolve: {
    root: jsSrc,
    extensions: [''].concat(extensions)
  },
  resolveLoader: {
    root: path.join(__dirname, "node_modules")
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }]
  },
  entry: entries,
  output: {
    filename: filenamePattern,
    publicPath: publicPath
  }
};

var karmaConfig = {
  frameworks: ['mocha'],
  files: ['tests/test-index.js'],
  preprocessors: {
    'tests/**/*.js': ['webpack']
  },
  webpack: webpackConfig,
  webpackMiddleware: {
    noInfo: true,
  },
  singleRun: false,
  autoWatch: true,
  colors: true,
  reporters: ['nyan'],
  browsers: ['Chrome'],
  plugins: [
    require("karma-nyan-reporter"),
    require("karma-mocha"),
    require("karma-firefox-launcher"),
    require("karma-webpack"),
    require("karma-chrome-launcher")
  ]
};
module.exports = function(config) {
  config.set(karmaConfig);
};

So I removed webpack plugin CommonsChunkPlugin. Here is another reference to this problem.

https://github.com/webpack/karma-webpack/issues/24