[4.0.0-alpha.0] Webpack runtime code in extracted css files

[pshurygin]

I'm using extract text plugin 4.0.0-alpha.0 with webpack 4 beta2. I have some dynamic requires in my code(without any css, js and json only). But one of my output css files contains not only styles but also code like this(which obviously breaks stuff):

function webpackContext(req) {
var id = webpackContextResolve(req);
var module = webpack_require(id);
return module;
}
function webpackContextResolve(req) {
var id = map[req];
if(!(id + 1)) { // check for number or string
var e = new Error('Cannot find module "' + req + '".');
e.code = 'MODULE_NOT_FOUND';
throw e;
}
return id;
}
webpackContext.keys = function webpackContextKeys() {
return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./Frontend/features/showcase/widgets/solomoto-contacts/i18n sync recursive ^\.\/.*\.json$";

I could workaround this by adding these lines to renderExtractedChunk method of the plugin, which is obviously some dirty hack.

  if (moduleSource instanceof _webpackSources.OriginalSource) {
      moduleSource = null;
  }

[pshurygin]

Still having same issue with 4.0.0-beta.0

[alexander-akait]

@pshurygin can you send PR and tests?

[pshurygin]

I managed to reproduce the issue with this minimal setup:

/index.js:

require('./a.css');

function dynamicRequire(filename){
  require(['./src/' + filename + '.js']);
}

dynamicRequire('b');

/a.css:

.App {
  color: black;
}

/src/b.js:

define([], function () {
  return {};
});

The problem is that the workaround above does not work in this case because webpack context module code comes as RawSource instead of OriginalSource. And i'm not sure about how to fix this for good.

[martinvd]

Having the same issue. Might have to do with webpack 4 not having a CSS module type yet.

[andybarron]

I am also having this issue whenever my code contains dynamic imports. This is a pretty major issue.

[fnlctrl]

Having this issue too... This is the only thing that's keeping me from upgrading to webpack 4

…

On Tue, Mar 13, 2018, 01:27 Andy Barron ***@***.***> wrote: I am also having this issue whenever my code contains dynamic imports. This is a pretty major issue. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#726 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFTLl7_rpzjWNINLuTd-Ns4FxERZj8Dcks5tdrAHgaJpZM4SMILS> .

[andybarron]

Oh, and FWIW, I am using ES6-style dynamic imports (i.e. await import()).

[yanghealsci]

Have the same issue

[OzzyCzech]

same here

here is an example with Webpack 4.1.1

https://github.com/OzzyCzech/webpack-the-right-way

[michael-ciniawsky]

TL;DR Use mini-css-extract-plugin instead :)

The webpack >= v4.0.0 'support' for extract-text-webpack-plugin was moved to mini-css-extract-plugin as more lightweight approach for webpack >= v4.0.0 and ETWP entered maintenance mode. We are sorry for the inconvenience here, but ETWP reached a point where maintaining it become too much of a burden and it's not the first time upgrading a major webpack version was complicated and cumbersome due to issues with ETWP. The mid-term plan is integrate CSS support directly into webpack to avoid this kind of issue in the future