D3.js : Uncaught Typeerror: Cannot Read Property 'document' Of Undefined

I'm having a really weird problem with d3.js initilization. In the d3.js script, at the very beginning, it tries to get var d3_document = this.document; but it pops the following

Solution 1:

It sounds like something (Babel, most likely) is inserting "use strict"; at the beginning of the D3 script file or combining it into another file with "use strict" at the top. That means this at global scope (or in a function called without a specific this) is no longer a reference to the global object, it's undefined. (Whereas in "loose" mode or in a function called with no specific this value, this at global scope is a reference to the global object, which is also accessible via the global variable `window1.)

You need to remove your d3.js from the list of scripts being transformed by Babel and just include it as-is. Assuming you're using the normal d3.js file, it looks like this:

!function() {
  var d3 = {
    version: "3.5.16"
  };
  var d3_arraySlice = [].slice, d3_array = function(list) {
    return d3_arraySlice.call(list);
  };
  var d3_document = this.document;
  // ...// ...// ...lots of stuff here...// ...// ...
}();

That relies on being run in loose mode.