karma-webpack: Karma webpack hangs on the Compiled successfully statement when wepback optimization is set

I’m submitting a bug report

Webpack version: 4.0.1

Webpack Karma version: 4.0.0

Karma version: 2.0.0

Please tell us about your environment: OSX High Sierra

Browser: PhantomJS 2.1.7

Current behavior: When setting theoptimization property on the webpack config the karma webpack hangs on the statement Compiled successfully . When removing the optimization property it runs the tests but fails on tests that try to use dynamically imported chunks on: undefined is not a constructor (evaluating '__webpack_require__.e

Expected/desired behavior: Not sure

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration. N\A
What is the expected behavior? Not sure
What is the motivation / use case for changing the behavior? Not Sure

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 20 (4 by maintainers)

Commits related to this issue

Disable optimization for webpack 4 (Fixes #322) — committed to scottohara/karma-webpack by scottohara 6 years ago
Fixes issue where transpiled code is read from wrong path. Github #322 — committed to Havunen/karma-webpack by Havunen 6 years ago
fix(karma-webpack): Always override output.filename Closes #322 — committed to codymikol/karma-webpack by matthieu-foucault 6 years ago
karma: Remove no longer required karma-webpack hangs workaround (#1294) Since the underlying issue (webpack-contrib/karma-webpack#322) is now fixed in the latest RC of karma-webpack. — committed to neutrinojs/neutrino by edmorley 5 years ago
next attempt: use fix from https://github.com/webpack-contrib/karma-webpack/issues/322#issuecomment-417862717 — committed to bootstrapworld/codemirror-blocks by schanzer 5 years ago

Most upvoted comments

To work around this issue you can add following to karma conf file:

// karma.conf.js
....
    webpack: {
      output: {
        filename: '[name]'
      },
...

+10

Havunen on Sep 1, 2018

By a case of trial and error going through the webpack optimization.* defaults: https://github.com/webpack/webpack/blob/v4.6.0/lib/WebpackOptionsDefaulter.js#L196-L294 https://github.com/webpack/webpack/blob/v4.6.0/lib/WebpackOptionsApply.js#L301-L338

…it seems that the culprit is optimization.splitChunks (which if unspecified by the user, is enabled by default). Setting that to false overrides the default and stops the hangs.

However I also found that if the webpack config explicitly sets optimization.runtimeChunk (as recommended by various long-term caching guides), then zero tests end up being run.

As such for me, the workaround that maintains the most prod-testing parity possible (optimization: undefined disables a lot more), is:

// karma config file
const merge = require('deepmerge');

{
  // ...

  webpack: merge(webpackConfig, {
    // Work around webpack 4 compatibility issues:
    // https://github.com/webpack-contrib/karma-webpack/issues/322
    optimization: {
      splitChunks: false,
      runtimeChunk: false
    }
  })
}

edmorley on Apr 20, 2018

For the optimization issue the following code worked for my karma config.

{
  webpack: { ...webpackConfig, optimization: undefined },
}

vinnymac on Apr 13, 2018

Okay here is the breaking change: https://github.com/webpack-contrib/karma-webpack/commit/c256d8798cbaaab4adf7fd9adc4cfb9343f7351f

It adds additional .js extension to file path.

ping @Teamop @michael-ciniawsky

Removing .js extension fixes this issue, but there are no test cases so I have no idea why its added there 😕

Maybe nodeJS provides way to normalize filename ?

Havunen on Sep 1, 2018

I’ves submitted a PR (#347) that fixes the issues with filename

ryanclark on Sep 3, 2018

This bug hit me as well… I started debugging karma for the first time ever and got into this plugin. There is something wrong in the logic, it has 2 methods in this.waiting list and done callback never resolves… Need to investigate more

Havunen on Sep 1, 2018

I’m also experiencing the issue with karma-webpack hanging when optimization is set on the webpack config.

Removing that property from the webpack config gets the test suite to run, but any test that involves sinon stubs and spies fails. This didn’t start happening until the upgrade to webpack 4, but it’s unclear if it’s related to karma-webpack or not and is probably outside the scope of this GitHub issue.

wosephjeber on Apr 10, 2018