karma-webpack: ReferenceError: Can't find variable: webpackJsonp

const devConfig = require('./webpack.dev.config');

const commonsChunkPluginIndex = devConfig.plugins.findIndex(plugin => plugin.chunkNames);
devConfig.plugins.splice(commonsChunkPluginIndex, 1);

// ...

webpack: devConfig,

// ...

I had to do this because my webpack.dev.config inherits from a common one which loads the CommonsChunkPlugin. This is not pretty but it’s working 😄

I was also running into this when using CommonsChunkPlugin in webpack. Disabling CommonsChunkPlugin when running in karma works.

CommonsChunkPlugin is not compatible with karma-webpack. Just remove it.

CommonsChunkPlugin is only an optimization, it doesn’t have effect on the executation.

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 of CommonChunksPlugin.

It seems that @carbosound1 could be right. I saw a little implementation of what he says. Although it would be great If @carbosound1 share a repo with CommonsChunksPlugins working correctly with karma, so he can bring to light how to solve this issue.

The ability to use commons chunk will be covered in v3 and by use, I mean not having to remove it for those that don’t want to run multiple webpack configs. As Tobias said above, CommonsChunk has not real effect on execution.

There is an open issue for this already in the milestone & @jayrmotta has a viable work around here - https://github.com/webpack/karma-webpack/issues/24#issuecomment-257613167

@carbosound1 is definitely correct. If you just look at your bundles and find the one that defines webpackJsonp, then put that first in your karma config’s files, you’re fine. The one passed to the CommonChunksPlugins constructor in the webpack config did the trick here.