Code Splitting with 2.0.0-rc.2 results in "Error: Order in extracted chunk undefined"

[dtothefp]

I saw a bunch of issues related to code splitting with extract-text-plugin.

• Extract text plugin with code splitting #208
• ExtractTextPlugin extracts from asynchronous split point chunks #120
• Extract Text plugin does not work with async required files #106

We were seeing the issue of using require.ensure and CSS was not extracted, but remained in the chunk bundle. I updated to 2.0.0-rc.2 and use the extract-text-plugin with allChunks: true option and it seemed to work in a minimal use case repo. When I migrated to a larger repo and used the same config I got

ERROR in ./src/containers/DeepDive/ContentBlocks/ContentBlocks.css
Order in extracted chunk undefined

ERROR in ./src/containers/ContactOptions/ActionBlock/ActionBlock.css
Order in extracted chunk undefined

ERROR in ./src/containers/DeepDive/ContentBlocks/ContentBlocks.css
Order in extracted chunk undefined

ERROR in ./src/containers/ContactOptions/ActionBlock/ActionBlock.css
Order in extracted chunk undefined

const plugins = new ExtractTextPlugin({
      filename: assetEntries.css[env],
      allChunks: true,
    }),
]

// loaders
[{
        test: /\.jsx?$/,
        enforce: 'pre',
        loader: 'eslint-loader'
    },
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
            presets: [Object],
            plugins: [Object],
            babelrc: false
        }
    },
    {
        test: /(components|containers|pages)\/.*\.css$/,
        loader: '/Users/davidfox-powell/dev/sleep-spa/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!style-loader?singleton!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]&-autoprefixer!postcss-loader'
    },
    {
        test: /assets\/css\/.*\.css$/,
        loader: '/Users/davidfox-powell/dev/sleep-spa/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!style-loader?singleton!css-loader?importLoaders=1!postcss-loader'
    },
    {
        test: /\.svg$/,
        loader: 'file-loader'
    }
]

which seems potentially related #80

I can make the minimal use case repo but it doesn't demonstrate this problem because it only happens in a larger code base

I can also confirm this was happening before I updated on 2.0.0-beta.4 if I add the allChunks: true option

[bebraw]

I wonder if we should merge those three into this one. Am I correct to assume this didn't work earlier even?

[dtothefp]

@bebraw I made this repo for isomorphic rendering of react-router with code splitting

https://github.com/dtothefp/isomorphic-react-router-code-splitting

I'm using require.ensure in the router getComponent, and in the isomorphic build I use babel-plugin-remove-webpack to convert it to a synchronus require. In the webpack config setup I pass the allChunks: true option, which does end up extracting my asynchronously loaded/chunked component CSS module styles out into the CSS bundle. You can test this by running yarn prod:quick and inspecting the dist/main-xxx.css file.

So it looks like my CSS is being extracted from the chunk but I think some of those issues I listed are asking for extracted CSS to create a separate file for each chunk, which I'm not overly concerned with.

What I am concerned with is the error Order in extracted chunk undefined which is referenced in this issue #80. I'm seeing this error in our larger application when applying the latest extract text plugin release candidate in combination with the allChunks: true option. Unfortunately I have no idea how to reproduce this in my small repo so if you have any suggestions on how to work with this issue that would be great.

[bebraw]

There's ignoreOrder flag now. Please give it a go.

[dtothefp]

@bebraw thanks...this works for my use case!!

[bebraw]

Ok, let's close then.