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

[avivshafir]

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

[scottohara]

Can confirm same.

In my case, I happen to (luckily) not use any dynamic import()s; so removing the optimization property is an effective workaround; but clearly this won't work for everyone.

I tried numerous other workarounds, to no avail, including:

Attempted workaround	Result
optimization: false	configuration.optimization should be an object
optimization: {}	hangs at Compiled successfully
optimization: {splitChunks: false}	hangs at Compiled successfully
optimization: {splitChunks: {}}	hangs at Compiled successfully
optimization: {splitChunks: {chunks: false}}	configuration.optimization.splitChunks.chunks should be one of these: "initial" "async" "all"
optimization: {splitChunks: {chunks: "async"}}	hangs at Compiled successfully

[robwalch]

Why does the webpack boiler plate code not include __webpack_require__.e when using karma-webpack? I'm having a similar problem and am not sure what it is about the karma / webpack config that is causing the chunk loading code to be omitted.

[wosephjeber]

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.

[robwalch]

Seems like webpack 4 evaluates if all modules are included in the main bundle and if they are it doesn't include __webpack_require__.e in the boilderplate code. The problem is that if you have code paths that hit require.ensure (__webpack_require__.e) then __webpack_require__.e is undefined and 💥 an exception is thrown.

For my case the only fix I could find was to leave some of the modules we split code on out of the test bundle so that __webpack_require__.e would be included in the entry output boilerplate.

[vinnymac]

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

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

[edmorley]

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

[deepsweet]

Still hangs at Compiled successfully for me even with karma-webpack@4.0.0-rc.0, webpack@4.17.1 and optimization: { splitChunks: false, runtimeChunk: false } or optimization: undefined.

The last working version was 3.0.0, I started to get this issue with 3.0.1.

[vladimiry]

The last working version was 3.0.0, I started to get this issue with 3.0.1.

same here, might be related stuff #345

[Havunen]

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]

At first I thought this has something to do with timing ... however even if I slow down things it still fails to to read the entry file.

{"code":"ENOENT","errno":34,"message":"no such file or directory","path":"/tmp/_karma_webpack_/fixtures/browser/test.no-compat.index.js"}

[Havunen]

I found it... the memory holds transpiled data in /tmp/_karma_webpack_/fixtures/browser/test.no-compat.index.js.js ( double file extension ) and karma-webpack reads it from /tmp/_karma_webpack_/fixtures/browser/test.no-compat.index.js. Still looking for the root cause of this.

[Havunen]

Okay here is the breaking change:
c256d87

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]

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

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

[Teamop]

@Havunen this change is based on the #334, I will check tomorrow

[alexbainter]

Just wanted to share my experience: I also had this issue occur even without setting optimization in the webpack config on both karma-webpack versions 3.0.1 and 4.0.0-rc.0, webpack 4.17.1, and karma 3.0.0. @Havunen's fix above worked for me (thank you!) as did downgrading to karma-webpack 3.0.0.

[ryanclark]

Has anyone got a repo that reproduces this? I’m really curious as to the double extension bug.

[ryanclark]

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

[Teamop]

still get error TypeError: Path must be a string. Received undefined with 3.0.2 and 4.0.0-rc.1, I have submitted a PR #351 , hope @rynclark @michael-ciniawsky could review for me, thanks

[holblin]

I had a similar issue. My webpack output file config was:

filename: '[name].js?v=[chunkhash:4]',

It's solve the issue, if I change that to:

filename: '[name].js',

[bgp1]

Has anyone been able to get this to work? This specific bug prevents me from upgrading to webpack@4. I have the same issue as @wosephjeber in that tests will run but any test that has a Sinon stub/spy will fail with the following:

undefined is not a constructor (evaluating '_modules_tmodule__WEBPACK_IMPORTED_MODULE_1__["method"].restore()')