Skip to content
This repository has been archived by the owner. It is now read-only.

Plugin removes all .js code from a chunk #118

Closed
dmitriid opened this issue Oct 15, 2015 · 23 comments

Comments

@dmitriid
Copy link

commented Oct 15, 2015

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

This comment has been minimized.

Copy link

commented Dec 22, 2015

same problem

@TrejGun

This comment has been minimized.

Copy link

commented Dec 25, 2015

👍

@preschian

This comment has been minimized.

Copy link

commented Jan 6, 2016

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

@olegggI

This comment has been minimized.

Copy link

commented Feb 21, 2016

the same

@redhead

This comment has been minimized.

Copy link

commented Apr 8, 2016

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

@codisms

This comment has been minimized.

Copy link

commented Apr 22, 2016

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

This comment has been minimized.

Copy link

commented Apr 26, 2016

same problem

@scythargon

This comment has been minimized.

Copy link

commented May 28, 2016

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

@dlebedynskyi

This comment has been minimized.

Copy link

commented Jun 3, 2016

Same problem. any workaround?

@scythargon

This comment has been minimized.

Copy link

commented Jun 3, 2016

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

This comment has been minimized.

Copy link

commented Jun 3, 2016

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

@dlebedynskyi

This comment has been minimized.

Copy link

commented Jun 3, 2016

I'm getting something really weird
image

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

This comment has been minimized.

Copy link

commented Jan 3, 2017

try:
filename: "[name].js"

@bebraw bebraw added the type: Bug label Jan 29, 2017

@ryanbagwell

This comment has been minimized.

Copy link

commented Feb 9, 2017

Anybody else find a solution for this?

@Twiksss87

This comment has been minimized.

Copy link

commented Feb 20, 2017

scythargon commented on 3 Jun 2016

it's work for me, thanks!

@evilebottnawi

This comment has been minimized.

@dmitriid

This comment has been minimized.

Copy link
Author

commented Sep 13, 2017

I personally haven't used the plugin since :)

@redhead

This comment has been minimized.

Copy link

commented Sep 13, 2017

I moved away from JavaScript :D

@jonwingfield

This comment has been minimized.

Copy link

commented Oct 12, 2017

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 comment has been minimized.

Copy link

commented Dec 15, 2017

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

This comment has been minimized.

Copy link

commented Jun 21, 2018

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

This comment has been minimized.

Copy link

commented Jun 21, 2018

@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

This comment has been minimized.

Copy link

commented Jun 22, 2018

@colintsteele Just javascript_pack_tag and stylesheet_pack_tag etc. See prusswan/d3ia-2e@fd3534a

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..

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.