Webpack missing modules with CommonsChunk and extract-text-webpack-plugin

I'm following Maxime Fabre's tutorial on Webpack and am trying to get a really simple webpack bundle with 1 entry point and 2 chunks to work. Since both chunks require jquery and mustache, I'm using CommonsChunkPlugin to move the common dependencies up to the main bundle file, just like in the tutorial. I'm also using extract-text-webpack-plugin to extract styles from the chunks and put them in a separate CSS file.

My webpack.config.js:

var ExtractPlugin = require("extract-text-webpack-plugin");
var plugins = [
    new ExtractPlugin("bundle.css"),
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendors", //move dependencies to our main bundle file
        children: true, //look for dependencies in all children
        minChunks: 2 //how many times a dependency must come up before being extracted
    })
];

module.exports = {
    /*...*/
    entry: "./src/index.js",
    output: {
        /*...*/
    },
    plugins: plugins,
    module: {
        loaders: [
            /*...*/
            {
                test: /\.scss$/,
                loader: ExtractPlugin.extract("style", "css!sass")
                //loaders: ["style", "css", "sass"]
            },
            /*...*/
        ]
    }
};

Relevant code in the entry point (I'm using ES6 syntax and babel):

import "./styles.scss";

/*if something is in the page*/
require.ensure([], () => {
    new (require("./Components/Chunk1").default)().render();
});
/*if something else is in the page*/
require.ensure([], () => {
    new (require("./Components/Chunk2").default)().render();
});

Both chunk1 and chunk2 look something like this:

import $ from "jquery";
import Mustache from "mustache";
/*import chunk templates and scss*/

export default class /*Chunk1or2*/ {
    render() {
        $(/*some stuff*/).html(Mustache.render(/*some other stuff*/));
    }
}

index.html:

<html>
<head>
    <link rel="stylesheet href="build/bundle.css">
</head>
<body>
    <script src="/build/main.js"></script>
</body>
</html>

When I run webpack the bundle builds just fine. However, in the browser I get a Uncaught TypeError: Cannot read property 'call' of undefined, and on closer inspection it looks like several modules end up as undefined in the final bundle.

My bug looks a lot like https://github.com/wenbing/webpack-extract-text-commons-chunk-bug. When I disable either extract-text-webpack-plugin or CommonsChunkPlugin and build it the webpack bundle works beautifully.

However even though I'm following a simple tutorial with 2 very common plugins the bug seems rare, so I'm assuming I'm messing up somewhere. What gives?

Recommended topics

Hot tags