2

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?

CoconutFred
  • 454
  • 3
  • 11
  • Post your index.html – cgatian Aug 12 '16 at 00:11
  • Done, added some more relevant code too. – CoconutFred Aug 12 '16 at 17:44
  • Try inpecting your output directory. I suspect main.js isnt being generated. – cgatian Aug 12 '16 at 18:09
  • As far as I can tell it's definitely being generated and loaded by the browser, it's showing up in the source files after clearing the cache and everything. – CoconutFred Aug 12 '16 at 18:12
  • If you open in chrome you should be able to go to the line number the exception is occurring on – cgatian Aug 12 '16 at 18:34
  • If you look at https://github.com/webpack/extract-text-webpack-plugin/issues/185 it's that exact line. It's clear that some modules are missing. However since nobody has commented on the github issue I'm pretty sure it's something in my config and not an actual project issue. – CoconutFred Aug 12 '16 at 18:38
  • Best I could do is if you push a slimmed down version to github I could clone and try debugging. – cgatian Aug 12 '16 at 18:40
  • https://github.com/CoconutFred/commonschunk-extract-text-webpack-plugin-bug – CoconutFred Aug 12 '16 at 18:56

0 Answers0