Breaking JS entrypoint when extracting all css chunks into 1 file #147

octaharon · 2018-05-15T16:38:16Z

Package version: 0.4.0
Node version: 6.8.0

So I've updated to webpack 4 and instantly run into extract-text-webpack-plugin incompatibility, and guys on stackoverflow insisted on switching in favor of this module. My use case is almost exactly as described in documentation with the difference being that there's sass-loader in the end of chain as well. All the rest is non-essential, the error is reproducable even with "zero" config.

My project is React-based, with a set of components each having it's own scss file, required inside each component individually, including the Root component - the one which is rendered to DOM inside my entry file (say /src/index.js, has require('index.scss')).

What happens on build stage is kinda in line with expectations - all the css got exported to style.css (despite it produces extra files like style.main.js for no obvious reason). The problem is that that my entrypoint javascript never got executed when the bundle is loaded. So there's no warnings or errors, everything compiles smoothly, the files (main.js and style.css) are delivered to the browser, but the code from index.js is not executed, so I just stare at a blank html template.

In the end I switched back to extract-text-webpack-plugin@next cause I couldn't overcome that issue. Any ideas what causes that?

The text was updated successfully, but these errors were encountered:

blakedietz · 2018-05-15T22:38:35Z

I too was seeing an issue similar to this. Instead I was getting a third bundle created. For example if the bundle was named bundle.js I would see an output of 0.bundle.js, bundle.js, styles.css.

alexander-akait · 2018-05-15T22:48:58Z

Feel free to investigate and send PR.
Don't use extract-text-webpack-plugin@next it is break long term cache, output very large bundle and can raise problems in runtime code which very hard to find and fix.

octaharon · 2018-05-16T07:33:23Z

Sorry, I've realized that a link to documentation was missing in my original post, edited. That's quite important for understanding the problem.

Perhaps the issue with plural output files belongs to webpack itself, since its driven by optimization.splitChunks.cacheGroups config option, but the issue with "swallowing" the entrypoint of scripts is definitely coming from this plugin. If those are connected, than there's no better description

problems in runtime code which very hard to find and fix

Do you by chance know a repo with the aformentioned configuration in place? That could be a good starting point for investigation.

dcousineau · 2018-05-17T14:07:34Z

I don't have a public repo but I finally traced my problem with production builds in webpack-4 to this issue.

In development mode my optimization stanza is:

  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    runtimeChunk: {
      name: 'manifest',
    },
  },

While in production mode I have

  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        },
      },
    },
    runtimeChunk: {
      name: 'manifest',
    },
  },

Production properly spits out the correct singular bundled CSS file, however my entrypoint chunk no longer executes.

I played around with removing both instances of chunks: 'all' and this caused the entry to execute (however, obviously, all the styles are in separate files that I now have to chase down individually).

I also tried removing both chunks: 'all' as well as renaming the cacheGroup to "app" (which is my entrypoint's name) and the non-execution problem came back.

Note: I've tested permutations with and without the runtime chunk stuff and it had no effect
Additionally: Removing the first chunks: 'all' immediately under the optimization and above cacheGroups has no effect

dcousineau · 2018-05-17T14:49:09Z

In attempting to create a minimal reproduction case, it appears if you don't include the outputted styles.js bundle generated via the cacheGroup the application won't execute at all. I was using the HTML Webpack Plugin which automatically inserted the styles.js as a script tag, when removing it the application ceases to function.

While this description is not 100% accurate, it feels like MiniCSSExtractPlugin is accidentally stealing 'entrypoint' responsibilities from the actual entry point and investing it in the very tiny styles.js file it generates in the process of extracting the styles imported.

dcousineau · 2018-05-17T15:05:21Z

Please see https://github.com/dcousineau/mini-css-extract-plugin-reproduction for a demonstration of how, even though the styles.js is effectively empty it prevents the entrypoint from executing.

dcousineau · 2018-05-17T15:11:36Z

I think the ideal behavior would be the app.js entry bundle would be capable of loading the styles.js bundle itself, or anything that comes from the import statement (e.g. classNames when using css modules) would get inlined or included in the app bundle itself (no generated styles.js bundle)

octaharon · 2018-05-17T18:42:02Z

Good job with locating the repo, man! I support the idea of avoiding generating extra js files when we extract css only, that's somewhat not semantical and user-friendly at all. That configuration, as it says in the documentation, should behave pretty much the same as the extract-text-plugin in this case. Which is, by the way, working perfectly for me so far in couple with optimize-css-assets-plugin. Other option would be auto-injecting the style.js into one of entries by providing entryName or something in plugin config, declarative style, or even detecting the 'target' setting of webpack itself.

coltonw · 2018-05-23T12:05:55Z

I would like to point out that this problem is doubly bad for javascript/css libraries trying to use mini-css-extract-plugin. Users of the library will have to not only import the library code and css, but also this generated style.js file or the library simply won't work.

rzcoder · 2018-06-05T12:30:44Z

Can't update to webpack 4 cus this bug

emilomir · 2018-07-26T12:45:11Z

I have the same problem. Did someone figured this out?

melissa-hong · 2018-07-26T23:28:15Z

In case it helps, a "workaround" I've found is to inline the contents of the extra js file generated using html-webpack-plugin (got the idea from @octaharon's suggestion). E.g:

Add the html-webpack-plugin to list of plugins in webpack config (you need to be using the alpha html-webpack-plugin version with webpack 4):

new HtmlWebpackPlugin({
    filename: "../../tmpl/my-css-prod.html",
    hash: false,
    inject: false,
    template: "my-css-tmpl.html"
})

Create a template that will inline the css of the extra js file e.g my-css-tmpl.html:

<% for (var css in htmlWebpackPlugin.files.css) { %>
  <link href="<%= htmlWebpackPlugin.files.css[css].path.substr(htmlWebpackPlugin.files.publicPath.length) %>" rel="stylesheet">
  <script type="text/javascript">
    <%=
        compilation.assets[htmlWebpackPlugin.files.css[css].path
        .substr(htmlWebpackPlugin.files.publicPath.length).match(/([a-z-]+)\.css/)[1] + ".js"]
        .source()
    %>
  </script>
<% } %>

I then import this generated html file into my head (in place of my manual css imports). The generated html file looks something like this:

<link href="../styles-a.css" rel="stylesheet">
<script type="text/javascript">
    (window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);
</script>
<link href="../styles-b.css" rel="stylesheet">
<script type="text/javascript">
    (window.webpackJsonp=window.webpackJsonp||[]).push([[46],[]]);
</script>

With this the css and js loads correctly - however I'm still having issues getting the import order of my css correct but I'm leaving that for another day...

Hope it helps - this has been stumping me for awhile! Any other ideas - let me know!

thuanmb · 2018-08-01T09:43:38Z

+1

newmanw · 2018-08-10T20:01:31Z

+1

Any updates?

flylixiaolong · 2018-08-14T14:07:54Z

+1

lourenc · 2018-08-17T13:21:51Z

+1

tony-landis · 2018-08-21T23:03:43Z

+1

alexander-akait · 2018-08-22T09:29:21Z

Please create minimum reproducible test repo

octaharon · 2018-08-22T09:45:17Z

@evilebottnawi I suppose that's it

piyushmahen · 2018-08-29T06:48:28Z

@michael-ciniawsky Any timeline till when can we expect this to be fixed?

isuttell · 2018-09-12T18:26:06Z

+1

jimmydief · 2018-09-12T20:30:26Z

Ended up concatenating the contents of the extra JS file to our entry file in a post-build step which worked.

tony-landis · 2018-09-12T21:11:17Z

It still fundamentally antithetical to bundling - all the styles for the entire app loading with the all. For us, thats a 100kb js file. Vs a few KiB if it were just the styles needed for any given page. Anthony Landis CTO, Founder | Anywhere.com mobile: 206-234-1018

…

On Wed, Sep 12, 2018 at 2:30 PM, James Diefenderfer < ***@***.***> wrote: Ended up concatenating the extra JS file to our entry file in a post-build step which worked. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#147 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACK9gjfJLlb0np0TfKcLdBhIoc3H1yTks5uaW7kgaJpZM4T_5Ca> .

fender · 2018-09-14T17:04:19Z

+1

fender · 2018-09-14T17:21:34Z

I'm not entirely sure if I have the same problem as you all but this is working for me to get a single extract CSS file and still have the entry JS execute. Notice there is no chunks: 'all' at all..

webpack.config.js

module.exports = {
  entry: './applications/responsive/browser.js',
  output: {
    path: path.resolve(__dirname, 'static'),
    publicPath: config.get('app.assetPath'),
    filename: path.join('generated', `${appName}-responsive.js`),
    chunkFilename: path.join(
      'generated',
      'chunks',
      `${appName}-[name]-${packageJson.version}.js`
    ),
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(['static/generated']),
    new MiniCssExtractPlugin({
      filename: path.join('generated', `generetic.css`),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ],
      },
      {
        test: /\.(woff|ttf|svg)$/,
        exclude: [/images/],
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'generated/fonts/',
            },
          },
        ],
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        exclude: [/fonts/],
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              outputPath: 'generated/images/',
            }
          },
          'image-webpack-loader',
        ]
      }
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'generetic',
          test: /\.css$/,
          enforce: true,
        },
      },
    },
  },

browser.js (entry)

import './styles';
// ... now do JS app init stuff ...

styles.js (I manually created this in the root)

import '../../css/fonts.css';
import '../../css/global.css';
// ... add every CSS file required here

timothywisdom · 2018-09-19T23:44:17Z

I was able to work around this issue by using the rename-webpack-plugin.

I configured it to search for the extra "styles" bundle (with a unique HASH) and rename it to a static "styles.bundle.js" file that I can dependably include in my entry HTML (because it always has the same name).

Here's an example

const RenameWebpackPlugin = require('rename-webpack-plugin')

module.exports = {
  entry: 'app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.[chunkhash].js'
  },
  plugins: [
    new RenameWebpackPlugin({
        originNameReg: /styles\..*\.js/,
        targetName: 'styles.bundle.js'
    })
  ]
}

CaptainYouz · 2018-10-04T12:41:11Z

hi!
i have the same problem here. Any news ?

kryptonian41 · 2018-10-15T18:19:08Z

The workaround which works for me is removing, all the instances of chunks: "all".

viljark · 2018-11-16T14:35:12Z

I am using multiple entry points so my solution may not be relevant to others.

For me including the styles chunk in the HtmlWebpackPlugin chunks list helped with the webpack bootstrap not happening on page load. Here is my code:

        new HtmlWebpackPlugin({
            chunks: ['styles', 'vendor', 'app'],
            inject: true,
            template: paths.appHtml,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
            },
        }),

optimization: {
    splitChunks: {
        cacheGroups: {
            styles: {
                name: 'styles',
                test: /\.css$/,
                chunks: 'all',
                enforce: true
            }
        }
    }
},

privatenumber · 2018-12-04T19:58:53Z

I have the same problem but with Vue and I made a minimal reproduction repo for this bug: https://github.com/hirokiosame/test-build

TerribleDev · 2018-12-07T18:48:26Z

is there any movement on this issue? IMO this is a major blocker from moving apps to webpack 4, or having webpack 4 apps do dynamic imports.

alexander-akait · 2018-12-07T18:52:38Z

Try to search time on this, but sorry i am very very very busy, feel free to investigate 👍

Fixes webpack-contrib#147

PierreRambaud · 2019-02-20T15:16:48Z

Same problem here, any updates?
Can someone have an idea about how to build css in dev environment?

Code tu reproduce:
https://github.com/PrestaShop/PrestaShop/tree/develop/admin-dev/themes/new-theme

zhangdongming0607 · 2019-04-15T12:37:38Z

I confused about this problem for a long time, In my case two way can solve this.

donnot extract css in 1 file, default code split looks good.
just reserve the styles.js, an empty file affects little, I think.
if use HtmlWebpackPlugin, style.js will auto insert into html.
if you construct html by yourself, you can do this as well

webextensions · 2019-08-09T23:09:09Z

In my case, it turned out to be an issue in my custom plugin. So, similarly, I'm assuming that this bug may be in html-webpack-plugin, and probably mini-css-extract-plugin is working fine. In my plugin, I was not going through all the files listed under compilation.chunks.files which caused the behavior described in this bug.

JonathanTR · 2019-08-23T19:24:18Z

Just a gentle bump on this thread. This is a widely used, officially designated webpack plugin and a piece of functionality in the main README seems to have been broken for over a year. Perhaps a warning should be added to the documentation, or the relevant section should be removed.

alexander-akait · 2019-08-23T19:25:24Z

It is fixed for webpack@5

privatenumber · 2019-08-23T21:09:30Z

Thanks for the update @evilebottnawi

I'm dealing with a Vue build and it seems vue-loader is incompatible w/ Webpack 5 due to webpack/webpack#9138, blocking me from confirming this is solved. I might investigate further when I have more time, but it seems like for Vue users we'll have to wait till Webpack 5 is stable and a compatible vue-loader is released.

alexander-akait · 2019-12-25T17:34:46Z

Here two problems:

some people forgot to add chunks on own html (yes you need include all generated chunks, even they are empty all content was extracted)
in some cases html-webpack-plugin doesn't include runtime code in html page (i think it should be already fixed, if not please open a new issue in html-webpack-plugin)
Single-file configuration emits JS assets in its own chunk group #85 (fixed in webpack@5), it is allow to avoid empty chunks and unnecessary scripts with only extracted content

If somebody think what he/she still has a problem and it is related to this issue please open a new issue, here a lot of difference issues and it is hard to investigate.

If somebody wants to know why it is happens I can explain with comments

michael-ciniawsky added this to the 0.5.0 milestone Aug 24, 2018

michael-ciniawsky added type: bug priority: 3 (important) severity: 3 (broken) labels Aug 24, 2018

Sija mentioned this issue Oct 20, 2018

JS code build in production doesn't get executed brocessing/kirby-webpack#50

Closed

rowanoulton added a commit to rowanoulton/mini-css-extract-plugin that referenced this issue Jan 15, 2019

Fixes webpack-contrib#147

74e0008

rowanoulton added a commit to rowanoulton/mini-css-extract-plugin that referenced this issue Jan 16, 2019

Fixes webpack-contrib#147

49ef3a9

rowanoulton mentioned this issue Jan 16, 2019

Prune empty JS bundles when plugin is used in conjunction with code splitting #339

Closed

6 tasks

rowanoulton added a commit to rowanoulton/mini-css-extract-plugin that referenced this issue Jan 16, 2019

fix: prune empty js bundles when code splitting

2962f42

Fixes webpack-contrib#147

This comment has been minimized.

Sign in to view

PierreRambaud mentioned this issue Feb 20, 2019

npm run dev isn't working PrestaShop/PrestaShop#12639

Closed

zioth mentioned this issue Sep 4, 2019

extract_css does't work well with chunking rails/webpacker#2268

Closed

alexander-akait closed this as completed Dec 25, 2019

michealengland mentioned this issue Mar 10, 2020

Include Style & Editor Webpack Entries WebDevStudios/wds-block-starter#7

Merged

divyarajmasani mentioned this issue Dec 22, 2020

Local/refactor rtCamp/web-stories-wp#181

Merged

Breaking JS entrypoint when extracting all css chunks into 1 file #147

Breaking JS entrypoint when extracting all css chunks into 1 file #147

Comments

octaharon commented May 15, 2018 • edited Loading

blakedietz commented May 15, 2018

alexander-akait commented May 15, 2018 • edited Loading

octaharon commented May 16, 2018

dcousineau commented May 17, 2018 • edited Loading

dcousineau commented May 17, 2018 • edited Loading

dcousineau commented May 17, 2018

dcousineau commented May 17, 2018

octaharon commented May 17, 2018 • edited Loading

coltonw commented May 23, 2018

rzcoder commented Jun 5, 2018

emilomir commented Jul 26, 2018

melissa-hong commented Jul 26, 2018 • edited Loading

thuanmb commented Aug 1, 2018

newmanw commented Aug 10, 2018

flylixiaolong commented Aug 14, 2018

lourenc commented Aug 17, 2018

tony-landis commented Aug 21, 2018

alexander-akait commented Aug 22, 2018

octaharon commented Aug 22, 2018

piyushmahen commented Aug 29, 2018

isuttell commented Sep 12, 2018

jimmydief commented Sep 12, 2018 • edited Loading

tony-landis commented Sep 12, 2018 via email

fender commented Sep 14, 2018

fender commented Sep 14, 2018

timothywisdom commented Sep 19, 2018

CaptainYouz commented Oct 4, 2018

kryptonian41 commented Oct 15, 2018

viljark commented Nov 16, 2018

privatenumber commented Dec 4, 2018

TerribleDev commented Dec 7, 2018

alexander-akait commented Dec 7, 2018

This comment has been minimized.

PierreRambaud commented Feb 20, 2019

zhangdongming0607 commented Apr 15, 2019

webextensions commented Aug 9, 2019

JonathanTR commented Aug 23, 2019 • edited Loading

alexander-akait commented Aug 23, 2019

privatenumber commented Aug 23, 2019

alexander-akait commented Dec 25, 2019

octaharon commented May 15, 2018 •

edited

Loading

alexander-akait commented May 15, 2018 •

edited

Loading

dcousineau commented May 17, 2018 •

edited

Loading

dcousineau commented May 17, 2018 •

edited

Loading

octaharon commented May 17, 2018 •

edited

Loading

melissa-hong commented Jul 26, 2018 •

edited

Loading

jimmydief commented Sep 12, 2018 •

edited

Loading

JonathanTR commented Aug 23, 2019 •

edited

Loading