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.

score 5 · Accepted Answer · answered Mar 30 '16 at 11:04

5

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.

answered Mar 30 '16 at 11:04

Carbosound1

580
1
8
20

Do you have a repo where I can see this case? – juan garcia Mar 30 '16 at 11:32
Sorry for the late answer i created very fast a repo on github not anything working but in shows the actual problem. https://github.com/carbosound1/webpack If you run "gulp test" => can't find varable jsonp then comment out the files in karma.conf run again and you will see the error is gone. (Errors will show up because no proper setup has been doen) just demonstration purposes – Carbosound1 Mar 30 '16 at 19:48
No problem, if you have a solution to this problem it would be great if it is without any error so you can bring to light what you found, I already answered in the github issue repo too, may be it could be closed XD. – juan garcia Mar 31 '16 at 19:26

score 1 · Answer 2 · answered Jul 18 '16 at 08:30

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")

score 0 · Answer 3 · answered Jan 22 '16 at 14:09

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

webpackJsonp not defined using karma-webpack?

3 Answers3

Linked