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"

score 1 · Accepted Answer · edited May 23 '17 at 12:13

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.

edited May 23 '17 at 12:13

Community

1
1

answered Oct 14 '15 at 09:35

hc2p

188
1
11

Thank you @hc2p, That's right. the error come from the inner require inside the callback function, because require.ensure dosn't load the module. – Houssem Fathallah Oct 14 '15 at 09:59

Undefined global window variables in webpack chuncks

1 Answers1