ReferenceError: Can't find variable: webpackJsonp about karma-webpack HOT 17 CLOSED

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 😄

from karma-webpack.

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

from karma-webpack.

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

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

from karma-webpack.

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.

from karma-webpack.

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.

from karma-webpack.

@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.

from karma-webpack.

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 - #24 (comment)

from karma-webpack.

Can you post your configuration?

from karma-webpack.

I am having the same issue and removing CommonsChunkPlugin temporarily fixes issue. Any idea how to make this work with CommonsChunkPlugin?

from karma-webpack.

Any idea how to make this work with CommonsChunkPlugin?

CommonsChunkPlugin doesn't change the behavior, it's only for optimized loading. So disabling is propably the best way.

from karma-webpack.

I have this issue too. Tried to use CommonsChunkPlugin to separate third party libraries from tests, but no luck.

from karma-webpack.

So, maybe somebody know how can i organize separated vendors.js and *.spec.js files?
I think it's good for performance cause if project has more than 100 specs file, and all files has contains all vendors code with test describes and testable code – in my case is ~2mb per each file.
Simple calculations will representative. 2 * 100 ~= 200mb of code where 98% lines will be duplicate.

from karma-webpack.

I've seen this error when using webpack-split-by-path also. Not sure if that uses CommonsChunksPlugins under the hood, but removing it fixes the issue.

from karma-webpack.

I'm also using webpack-split-by-path, but I'm not using the CommonsChunkPlugin.

I think the problem for me is that I can't specify the vendor bundle in the files config option, because it doesn't exist at the time when Karma tries to find it, but instead is created after webpack pre-processing.

@joeyrobert How are you using webpack-split-by-path and ensuring that the vendor bundle gets loaded before anything else?

from karma-webpack.

There is an open issue for this already in the milestone

For these who are trying to find it in order to suscribe the issue, it is #22.

from karma-webpack.

@jayrmotta Why not use plugin instanceof webpack.optimize.CommonsChunkPlugin instead of detecting type by whether it has a property?

from karma-webpack.

I did this piece of code to remove a list of plugins (only one for now, but who knows...), based on plugin.constructor.name:

const disabledPluginNames = [
  'CommonsChunkPlugin'
]
let generatedCommonConfig = commonConfig(envOptions);
generatedCommonConfig.plugins = generatedCommonConfig.plugins.filter(plugin => !disabledPluginNames.some(pluginName => pluginName === plugin.constructor.name));
return generatedCommonConfig;

from karma-webpack.