Plugin removes all .js code from a chunk

[dmitriid]

TL;DR: when generating two .js and one .css chunks the plugin removes all .js code from one of the .js chunks.

I may be missing something, but I can't find what it is :)

The config is as follows:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var glob = require("glob");

module.exports = {
    entry: {
        app: [
            './.build/app/app_dependencys.js',
            './.build/app/_helpers/api_helpers.js',
            './.build/app/event-manager.js',
            './.build/app/route_handlers/Router.js'
        ],
        lib: [
            'c3',
            'lodash',
            'moment',
            'moment-timezone',
            'pleasejs',
            'react-bootstrap-datetimepicker',
            'react',
            'react-bootstrap',
            'react-d3-components',
            'react-datepicker-component',
            'react-googlemaps',
            'react-router',
            'react-slider',
            'reactable',
            'select2'
        ],
        css: glob.sync('./css/css/*.styl')
    },
    output: {
        path: path.join(__dirname, 'js/dist'),
        filename: "app.js",
        chunkFilename: "[name].js"
    },
    module: {
        loaders: [
            {test: /\.jsx?$/, loader: 'babel?compact=false', ignore: /node_modules/},
            {test: /\.json$/, loader: "json"},
            {
                test: /\.styl$/,
                loader: ExtractTextPlugin.extract('raw', 'raw!stylus')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('id', "./../../css/compiled/css.css", {allChunks: false}),
        new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"lib", /* filename= */"lib.js", Infinity)
    ],
    externals: ['jquery'],
    bail: true
};

When running webpack, this is the output:

Time: 51884ms
                       Asset     Size  Chunks             Chunk Names
                      app.js   3.8 kB    0, 1  [emitted]  app, css
                      lib.js  3.47 MB       2  [emitted]  lib
./../../css/compiled/css.css   131 kB       1  [emitted]  css
   [0] multi app 64 bytes {0} [built]
   [0] multi css 364 bytes {1} [built]
   [0] multi lib 196 bytes {2} [built]
    + 634 hidden modules
Child extract-text-webpack-plugin:
        + 1 hidden modules
Child extract-text-webpack-plugin:
        + 1 hidden modules
Child extract-text-webpack-plugin:
        + 1 hidden modules

.... it goes on for a while ...

As a result:

• css.css contains all css, as required
• lib.js contains all lib code, as required
• app.js: every single entry in app.js is replaced with

/***/ 581:
/***/ function(module, exports) {

    // removed by extract-text-webpack-plugin

/***/ },

/***/ 582:
/***/ function(module, exports) {

    // removed by extract-text-webpack-plugin

/***/ },
...

[mrsum]

same problem

[TrejGun]

:+1:

[preschian]

same problem about 'removed by extract-text-webpack-plugin'

[olegggI]

the same

[redhead]

Does anyone has a solution / workaround? Is this plugin even mantained?

[codisms]

What I've found is that the JS section for the CSS is extracted into it's own file, but the source map ends up getting wiped out. The resolution to this was to add "?sourceMap" to the "css-loader".

The problem I found with this is that it mangles the source names in the source map. Not sure what to do about that yet.

[fezhengjin]

same problem

[scythargon]

Okay folks, any updates or workarounds may be with another plugins for css? Same problem here.

[dlebedynskyi]

Same problem. any workaround?

[scythargon]

Okay, what worked for me is: good: entry: { js: './js/app.js', css: './scss/main.scss' }, bad: entry: { js: './js/app.js', scss: './scss/main.scss' } the only difference - css key instead of scss. And also entry: [ './js/main.js', './scss/main.scss' ], works too.

[codisms]

Did you have sourcemaps enabled? That appears to be the hitch.

[dlebedynskyi]

I'm getting something really weird

and webpack config parts

const CSS_LOADER = `css?sourceMap&modules&importLoaders=1&${LOCAL_IDENT_NAME}?root=${ROOT_PUBLIC}!postcss-loader!sass?sourceMap!toolbox`;
...
module.exports = {
    entry: [
        'babel-polyfill',
        './src/bootstrap',
        './src/scss/global.scss'
    ],
    output: {
        filename: 'bootstrap.js',
        path: path.join(__dirname, PATH)
    },
...
// Load SCSS
            {
                test: /\.scss$/,
                loader: `style!${CSS_LOADER}` // ExtractTextPlugin.extract('style', CSS_LOADER)
            },

I even tried to remove ExtractTextPlugin entirely but still getting same errors. Also found that on production build with this - all works fine

    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new ExtractTextPlugin('style.css', {
            allChunks: true
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                screw_ie8: true,
                keep_fnames: true,
                warnings: false
            },
            mangle: {
                screw_ie8: true,
                keep_fnames: true
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin()
    ],

Same goes for eval - * devtool config likecheap-module-eval-source-map. all works fine... weird. anyone has idea what could be causing this?

[olegggI]

try: filename: "[name].js"

[ryanbagwell]

Anybody else find a solution for this?

[Twiksss87]

scythargon commented on 3 Jun 2016

it's work for me, thanks!

[alexander-akait]

@dmitriid @mrsum @TrejGun @preschian @olegggI @redhead @codisms @fezhengjin @scythargon @ryanbagwell problem still exists?

[dmitriid]

I personally haven't used the plugin since :)

[redhead]

I moved away from JavaScript :D

[jonwingfield]

Looks like this is caused by having a JS file with the same entry name as your CSS/LESS file. I just suffix the less items with "-less" to work around it. Not a very well-written module. But this is JavaScript after all.

[halo]

This occurred to me in Rails 5.1 using webpacker with the default configuration (which I assume will lead more people to this issue soon :) It's used here in rails/webpacker.

I can confirm that if you have e.g. admin.sass and admin.js, the latter will be stripped of all content. Renaming one of the files is a workaround as @jonwingfield noted.

[prusswan]

As of Rails 5.2 (webpacker 3.5), if the JS pack contains CSS, the CSS will be extracted into a CSS pack with the same name. So both packs need to be referenced in Rails even if only the JS pack is defined.

Just posting this as I thought I ran into the reported issue, but perhaps it is only a gotcha with similar symptoms.

[colintsteele]

@prusswan what exactly do you mean 'referenced in Rails'? Would you mind pasting a small code snippet to elaborate? I'm having a lot of trouble including CSS from node_modules for one of my components and have yet to find a solution better than including it at the application.js level.

[prusswan]

@colintsteele Just javascript_pack_tag and stylesheet_pack_tag etc. See https://github.com/prusswan/d3ia-2e/commit/fd3534aca1fcb051d700b6e966664eeecfeba7bc

I noticed this behavior after seeing that all the CSS stuff is "removed" in the JS pack, and checking the output files in public/packs. It makes sense but probably better documentation (at the rails/webpacker side) would help for Rails users who are new to webpack and the default configuration put in place by rails/webpacker..