Karma webpack outputting multiple "webpack: wait until bundle finished"

Question

After the recent releases of webpack 1.14.0 / karma 1.4.0 / karma-webpack 2.2.0, that I now see a lot of these messages when karma starts its webpack build.

webpack: wait until bundle finished:

Sometimes I see as many as 6-8 of them and they seem to be making the build longer. For example, this:

Hash: 255562a2a96fffe34fae
Version: webpack 1.14.0
Time: 408ms
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
ts-loader: Using [email protected] and C:\git\project\tsconfig.json

So far, it hasn't stopped my build, but at the very least it seems like something is now locking up, if even temporarily. Anyone else seeing this? I'd like to clean this up if it is something on my end, but as I say, my config files haven't changed, yet this has now appeared with the recent flood of releases from the karma/webpack family of products in the last 3 weeks.

My questions are:

1. What does this message mean?
2. What can be done to fix the issue creating them?

Unobtrusive

I have the same issue. It's really a big problem. Looks like Karma triggers a webpack build process for every test file. – Carnelian

Answer 1

karma-webpack treats every single spec file as separate entry point and produces a separate webpack bundle for each. Thus your console logs are just fine and do not indicate any issues.

If you want to get rid of the multiple webpack: wait until bundle finished: outputs you can disable webpack-dev-middleware info logging in your karma config:

...

webpackMiddleware: {
  noInfo: true
},

...

Read more about the complete list of possible options for the webpackMiddleware section in the readme of the webpack-dev-middleware package.

Belfast

Answer 2

Okay. Worked with this and looks like I found a solution.

In my case issues was in multiple file including in the Karma.conf

Before I had this files configuration

files: [
            src/**/*.spec.js'
        ],
        preprocessors: {
            'src/**/*.spec.js': ['webpack']
        },

looks like karma launch a webpack compilation for every file that was included and it takes a memory (to keep a compiled filed before tests). So that's why we have a memory leak and resource/time issue.

So I resolved this issue by this changes: I created an one testEntry file in my app root (I expect that Karma will be working only with it and it will trigger the webpack compilation only once, for this file) and it works exactly like I expected :)

files: [
            'src/__testsEntry__.spec.js'
        ],

In this file I required all tests via this construction

const req = require.context("./", true, /.+.spec.js/igm);
req.keys().forEach(function(key) {
    req(key);
});

This resolved my issue and now I have only one webpack compilation for one file. It increased speed of project test process and pc resources.

Hope it helps. Best regards.

P.S. There is a screenshot with a report to demonstrate that every test suite showed like a different group via karma-spec-reporter

Here is a demonstration of only one bundling process in the test case.

Update 2: In this solution some issue exists with debug in case of test failing, because we will see in the a report a line number of our testEntry file (not an original file). So till we find an other possible solution we can use some name conventions of your test suites to increase understanding - in which file our test was failed.

Carnelian

ReferenceError: Can't find variable: require I get in the testsEntry.spec.js – Fiesta

please consider installing npm install karma-browserify --save-dev – Fiesta

The whole reason for including different spec files, is so that you can isolate a test set for each class, component or service you are testing. The output shows the results against each spec and accumulates them into totals as well. Doing it in the way your solution here proposes, if you have just one entry, does it mean the results appear as one spec in a single accumulation? If so, this doesn't solve the problem, or at least, it creates a new one. – Unobtrusive

npm install karma-browserify even don't solve the problem. – Fiesta

I don't understand why do you want to use karma-browserify if we are using webpack. So I used my solution with webpack. Probably for browserify it will be a different approach. Sorry Ali. – Carnelian

@KimGentes. I don't sure that I understand correctly your notice but ,actually, I didn't see any issues like you described. Every test was launched normally and I am using karma-spec-reporter to see a result table in formatted view. So I results appear just like test suite. I'll attach some schreenshot with the results report. – Carnelian

@Carnelian Use sourcemaps to see at which lines in which files you have problems – Norry

Answer 3

After checking the options of webpack-dev-middleware, I found out that you can get rid of the "｢wdm｣: wait until bundle finished: noop" output by specifying the following in your karma.conf.js (right below the reporters section):

webpackMiddleware: {
  logLevel: 'error'
}

Tested with:

• karma 3.1.1
• karma-webpack 3.0.5

Sheet