D3.js: Uncaught TypeError: Unable to read undefined property document

Question

I have a very strange problem with initializing d3.js. In the d3.js script, at the very beginning, it tries to get var d3_document = this.document; but the following error appears:

 Uncaught TypeError: Cannot read property 'document' of undefined 

when debugging, this.document returns undefined.

I use yo webapp to create a project. It uses bower as a package manager and gulp for the build process (which uses babel for ES2015 features).

The funny thing is that I tested it with xampp and it works great!

I would appreciate some advice! Thnx!

Answer 1

Looks like something (Babylon most likely) inserts "use strict"; to the beginning of the D3 script file or merges it into another file with the words "use strict" at the top. This means that this in a global scope (or in a function called without a defined this ) is no longer a reference to a global object, but undefined . (Considering that in the "free" mode or in a function that does not have this special meaning, this in the global scope is a reference to the global object, which is also accessible through the global variable `window1.)

You need to remove your d3.js from the list of scripts converted by Babel and just enable it as is. Assuming you are using a regular 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... // ... // ... }(); 

It depends on starting in free mode.