Problem with code splitting

In my code I have something that looks like this:

function retriveLocaleData(language, callback) {
  if (language === 'es') {
    require('bundle?name=spanish!../locales/es.js')(callback);
  } else {
    require('bundle?name=english!../locales/en.js')(callback);
  }
}

In other projects that would successfully create a separate bundle for my I18n data for that locale, but using this library I am constantly getting this error:

ReferenceError: window is not defined
    at evalmachine.<anonymous>:3:37
    at evalmachine.<anonymous>:94:10
    at ContextifyScript.Script.runInNewContext (vm.js:38:15)
    at module.exports ([snip]/node_modules/static-site-generator-webpack-plugin/node_modules/eval/eval.js:62:12)
    at Compiler.<anonymous> ([snip]/node_modules/static-site-generator-webpack-plugin/index.js:29:20)

I think I finally understand why it’s happening. Webpack is adding code to the bundle that appends the second chunk to the dom under certain conditions. The code it generates is using window, which blows up while the static-site-generator-webpack-plugin is generating the HTML.

Has anyone encountered this before / can think of any solutions? It would be a real shame to lose the ability to code split while generating a static site.

[jonathaningram]

I believe the OP got it right, here’s my understanding of why this fails:

1. You want to include something on demand. E.g. your index.js can look as simple as this:

   require(['./SimpleComponent'], function(Com) {
     console.log(Com)
   })
   

   See https://webpack.github.io/docs/code-splitting.html BTW.

2. The static-site-generator-webpack-plugin module will evaluate your index.js in it’s compilation stage.

   var source = asset.source();
   // console.log(source);
   var render = evaluate(source, /* filename: */ self.renderSrc, /* scope: */ undefined, /* includeGlobals: */ true);
   

3. You’ll try to compile your app, but you’ll get the window is not defined issue but it will appear vague.

   ERROR in ReferenceError: window is not defined
   at Object.defineProperty.value (main:13:37)
   at main:621:10
   at webpackUniversalModuleDefinition (main:3:20)
   at main:10:3
   at ContextifyScript.Script.runInNewContext (vm.js:18:15)
   

4. This is because it comes from the evaluated file that is created in step 2 above (main.js). If you enable the log statement in step 2 you can see the generated main.js.

5. At line 12 of main.js you’ll see this on-demand requiring magic that webpack adds:

   /******/    // install a JSONP callback for chunk loading
   /******/    var parentJsonpFunction = window["webpackJsonp"];
   /******/    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
   

6. And this is where the error actually comes from.

Please somebody correct me if I’m wrong though!

As for solving this, I am not sure. @markdalgleish don’t suppose you have any ideas how to solve this? I am happy to provide a simple repo to reproduce this if it helps.

[oxpa]

hey, try #55