Module ID conflict on first dev server compilation

[avaly]

The latest version of extract-text-webpack-plugin triggers a weird bug in a webpack bundle where multiple modules share the same module ID.

For more context, see: webpack/webpack#5560 (comment)

[alexander-akait]

@avaly thanks for issue, can your provide minimum reproducible test repo?

[avaly]

Unfortunately, no I don't have a minimal test case. Any attempts to remove any number of modules from our giant bundle (1000+ modules) makes the bug not present itself.

[alexander-akait]

@avaly maybe problem in webpack, if you disable extract-text-webpack-plugin all work fine?

[khalsah]

I'm running into a similar issue when attempting an upgrade of extract-text-webpack-plugin.

In our case webpack-dev-server successfully completes the initial build of the project.
If you edit a stylesheet the rebuild will have the inconsistent module ID issue mentioned here.
If you then edit a javascript file the rebuild will complete successfully.

Downgrading extract-text-webpack-plugin to 2.1.2 avoids the issue.
Bypassing extract-text-webpack-plugin and just using style-loader directly avoids the issue.

[alexander-akait]

@khalsah maybe you can create minimum reproducible test repo or at least make the screenshot?

[sentience]

We're blocked from upgrading to 3.0 by this issue too, and I've managed to reduce our app down to a near-minimal test case: https://github.com/cultureamp/multi-loader-extract-text-bug

This Webpack configuration uses both multi-loader and extract-text-webpack-plugin, and removing either one seems to make the problem disappear, although I strongly suspect the use of multi-loader is merely a coincidence.

[sentience]

@avaly, @khalsah: Are either of you using multi-loader in your configs?

[khalsah]

No multi-loader in our config.

[joaovieira]

same issue, no multi-loader. also tested:

• extract-text-webpack-plugin@2.1.2 + webpack@3.5.6: ok
• extract-text-webpack-plugin@3.0.0-beta.0 + webpack@3.5.6: not ok

first build is fine, but on rebuild module IDs get moved around

[alexander-akait]

@joaovieira can you provide minimum reproducible test repo, it is allow more faster find solution, thanks!

[joaovieira]

Yes, sorry, will try and see what I can find. Just had to run off of work earlier. Will post with details.

[joaovieira]

Ok, spent hours trimming it down to this: https://github.com/joaovieira/webpack-extract-bug. Maybe its too small as there are no CSS modules and the Sass file and class that go through extract-text are not even used. But the symptoms are always the same - a module is replaced and called with unexpected args.

I hope it helps. Removing any of the loaders causes it to work 😕

[alexander-akait]

@joaovieira thanks!

[alexander-akait]

@joaovieira seems something wrong with cache, try to add cache: false to webpack.config.js and all works as expected 😕

[alexander-akait]

@joaovieira just add code for invalidate cache to https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/master/src/loader.js#L51

var subCache = "subcache " + NS + " " + request; // eslint-disable-line no-path-concat
    childCompiler.plugin("compilation", function(compilation) {
      if(compilation.cache) {
        if(!compilation.cache[subCache])
          compilation.cache[subCache] = {};
        compilation.cache = compilation.cache[subCache];
      }
    });

[alexander-akait]

@sentience @joaovieira and you are right, it is regression after upgrade from 2.1.2 to 3

[alexander-akait]

PR #627

[sokra]

This is a webpack bug. The cache is not correctly created. webpack should handle caches for child compilers.

[alexander-akait]

@sokra should we use #627 as workaround before webpack fix this bug?

[sokra]

Give me a few hours and I fix it in webpack...

[joaovieira]

Awesome. Great work guys! @sokra @evilebottnawi glad I could help.