Uncaught ReferenceError: vendor is not defined when using DllPlugin and DllReferencePlugin

Question

I am having the weirdest problem. I was trying to optimize my webpack bundle build time and followed a tutorial where the idea was to take out all vendor libraties, build them via seprate webpack config file using webpack.DllPlugin and webpack.DllReferencePlugin - that should allow me to rebuild only app code and do not rebuild vendors upon each small change in app code.

So I have created two config files.

webpack.dll.config.js for vendor files

var webpack   = require("webpack");
var path      = require("path");

module.exports = {
   entry: {
      vendor: ["./src/app/app_vendors.js"]
   },

   output: {
      path: path.resolve(__dirname, "build_dll", "js"),
      filename: "[name].js",
      sourceMapFilename: "[name].map",
      chunkFilename: "[id].chunk.js",
      pathinfo: true
   },

   plugins: [
      new webpack.DllPlugin({
         path: path.join(__dirname, "build_dll", "[name]-manifest.json"),
         name: "[name]",
         context: path.resolve(__dirname, "src", "app")
      }),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin()
   ],

   resolve: {
      modules: [
         path.resolve("./node_modules"),
         path.resolve("./src/app")
      ]
   }

}

webpack.app.config.js for app files

var webpack   = require("webpack");
var path      = require("path");

module.exports = {
   devtool: "source-map",
   cache:   true,

   entry: {
      app: ["babel-polyfill", "./src/app/app_client.js"]
   },

   output: {
      path: path.resolve(__dirname, "build_client", "js"),
      filename: "[name].js",
      sourceMapFilename: "[name].map",
      chunkFilename: "[id].chunk.js",
      pathinfo: true
   },

   module: {
      rules: [{
         test: /\.jsx?/,
         include: path.resolve(__dirname, "src/app"),
         exclude: path.resolve(__dirname, "node_modules"),
         loader: "babel-loader",
         options: {
            presets: [
               ["es2015", {"modules": false}], "stage-0", "react"
            ]
         },
      }]
   },

   resolve: {
      modules: [
         path.join(__dirname, "node_modules"),
         path.join(__dirname, "/src/app")
      ]
   },

   plugins: [
      new webpack.DllReferencePlugin({
         context: path.join(__dirname, "src", "app"),
         manifest: require("./build_dll/vendor-manifest.json")
      }),
      new webpack.optimize.CommonsChunkPlugin({
         name: "common", 
         filename: "common.js", 
         minChunks: 2, 
         chunks: ["app", "vendor"]
      })
   ]
};

This files do generate:

• vendor.js in ./build_dll/js
• vendor-manifest.json in ./build_dll
• app.js and common.js in ./build_client/js

I then make sure to include vendor.js, common.js and app.js in my html (I also make sure that they are loaded from server via chrome dev console).

The problem is that when I rebuild everything without any errors and refresh my webpage I get this error:

external "vendor":1 Uncaught ReferenceError: vendor is not defined
    at Object.<anonymous> (external "vendor":1)
    at __webpack_require__ (bootstrap 590bc7b…:52)
    at Object.<anonymous> (index.js from dll-reference vendor:1)
    at __webpack_require__ (bootstrap 590bc7b…:52)
    at Object.<anonymous> (app.js:7134)
    at __webpack_require__ (bootstrap 590bc7b…:52)
    at webpackJsonpCallback (bootstrap 590bc7b…:23)
    at app.js:1

And if I open my app.js file, I will have this as first lines and an error on the very first module.exports

webpackJsonp([0,1],[
/* 0 */
/* unknown exports provided */
/*!*************************!*\
  !*** external "vendor" ***!
  \*************************/
/***/ (function(module, exports) {

module.exports = vendor; // ERROR HERE

/***/ }),
/* 1 */
/* unknown exports provided */
/* all exports used */
/*!*****************************************************************************!*\
  !*** delegated ../../node_modules/react/react.js from dll-reference vendor ***!
  \*****************************************************************************/
/***/ (function(module, exports, __webpack_require__) {
...

What is wrong?

Answer 1

You missed a small part of the configuration. Inside the output, of you webpack.dll.config.js, you have to add the library option (you can change it straight to vendor if you prefer)

output: {
  path: path.resolve(__dirname, "build_client", "js"),
  filename: "[name].js",
  sourceMapFilename: "[name].map",
  pathinfo: true,
  library: '[name]_dll'
}

And after that you have to change the DllPlugin configuration accordingly

  new webpack.DllPlugin({
     path: path.join(__dirname, "build_dll", "[name]-manifest.json"),
     name: "[name]_dll",
     context: path.resolve(__dirname, "src", "app")
  })

This is because the DllPlugin expects to find the vendors inside a global scoped variable with e certain name (in your configuration, vendor) BUT you actually didn't exported it.

In order to do that, you just have to use the library option.