Undefined global window variables in webpack chuncks

Question

I'm using webpack commmon chuncks to define a global library object (common components) that will be used in common with other generated bundles.

Common code ( components.js )

MyLib = window.MayLib = {}
MyLib.Utils = {
  commonFn : function (){
    /* common code */
  }
}

module.exports = MayLib;

First common usage ( dashboard.js )

   require.ensure ('./components', function () {
      MyLib.Dashboard = {
        /** Dashboad code here */
      }
   })

second common usage ( account.js )

   require.ensure ('./components', function (){
     MyLib.Account = {
       /** Account code here */
     }
   })

After generate bundles, a new common code has been created but MyLib is undefined in global window, "cannot set property of undefined"

Answer 1

You can solve your problem using the expose-loader . See also this similar issue .

Although i think you can easily solve your problem by requiring the MyLib object inside the callback. No need to expose it to global scope anymore.

require.ensure ('./components', function (require){
  var MyLib = require('./components');
  MyLib.Account = {
    /** Account code here */
  }
})

Sidenote: You can try to simplify your code-splitting by using the CommonsChunkPlugin , then you just use simple require('components') and the plugin is doing the rest.