d3 TypeError when initializing

[sibbl]

When trying to use the LineChart, I get a Uncaught TypeError: Cannot read property 'document' of undefined thrown by d3 as it tries to get the value of this.document in line 8... Am I doing something wrong there or can I somehow bind window to the d3 loader?

[nightlyop]

Can you give more details please. How are you using LineChart?

[sibbl]

I'm using it in React by compiling it with gulp, browserify and the presets es2015, react, stage-0 and stage-1.

I'm using it inside a React component where I import it via import {LineChart} from 'react-3d'. It compiles fine, but when running I get the error I wrote about.

If there's interest, I can try narrowing down the problem and provide a sample project where it fails. For now I use a workaround where I bind the function where d3 is initialized in the d3.js to window - so .bind(window)();. I wonder why d3 uses this in its code at all...

[nightlyop]

An example might help. I don't have any problems and don't have to bind this to the component. Actually I'm using TypeScript but I'm using the LineChart like that:

declare var require: any;
var RD3 = require('react-d3');

...

<RD3.LineChart
  {... this.props}
  width={this.state.lineChartWidth} 
  height={this.state.lineChartHeight}
/>

ps. I use the width and height props to adjust the size of the chart dynamically.

[sibbl]

Please download a minimal sample here, run it using npm start, wait until it compiles the JS code and then go to 'http://localhost:3000' and have a look into the console.

[yang-wei]

I downloaded your code but still cannot reproduce it. Can you elaborate some environment detail like npm, node and os version.

This is the code

import ReactDOM from 'react-dom';
import { LineChart } from 'react-d3';
import React from'react'; // have to add this line to transpile jsx (maybe because of config)

const lineData = [
  {
    name: "series1",
    values: [ { x: 0, y: 20 }, { x: 24, y: 10 } ],
    strokeWidth: 3,
    strokeDashArray: "5,5",
  },
  {
    name: "series2",
    values: [ { x: 70, y: 82 }, { x: 76, y: 82 } ]
  }
];

ReactDOM.render(
    <LineChart
      data={lineData}
    />,
    document.getElementById("sample")
);

[nightlyop]

I gave it a try but wasn't able to get it running.

• I had to change the name of the project in package.json to a name without spaces.
• Are you sure you can use JSX syntax in a js document (I usually use jsx files)?
• Webstorm does not like how you import the library. It says that this version of JS does not support that import statement. But it didn't work when I changed to the older syntax either.

[sibbl]

Oh sorry, I changed the project name afterwards, my mistake!

Does "wasn't able to get it running" mean that it didn't run at all or that you could reproduce the problem in your browser?

I'm using a quite larger project with ~10 components including other libraries and a logic project with ~60 classes, where all of this is no problem. As I use gulp to transpile it, there's no need to use jsx file endings. The bundled app.js in the dist folder also looks good and includes d3 there.

What older syntax are you talking of? ES6+ features the import ... from ... - is there an older version which I can maybe bind this to be window?

I'm running it on Windows 10 build 10586, use Node 5.1.0 and npm 3.3.12.

EDIT: here's an updated sample with the code from @yang-wei and the fixed name in project.json.

[nightlyop]

I could reproduce the problem. I tried var ReactDOM = require('react-dom'); which I think is ES5? I tried it because webstorm wasn't happy with the ES6 syntax. I have no idea what's the reason therefore. I'm using ES6 syntax in other projects...

Works:

import React from 'react';
import ReactDOM from 'react-dom';
//import { LineChart } from 'react-d3';

ReactDOM.render(
<h1>test</h1>,
    document.getElementById("sample")
);

But

import React from 'react';
import ReactDOM from 'react-dom';
import { LineChart } from 'react-d3';

ReactDOM.render(
<h1>test</h1>,
    document.getElementById("sample")
);

gives me the following error:

Uncaught TypeError: Cannot read property 'document' of undefined(anonymous function) @ node_modules\d3\d3.js:8190 @ node_modules\d3\d3.js:1s @ _prelude.js:1(anonymous function) @ _prelude.js:1225.../common @ node_modules\react-d3\barchart\BarChart.js:4s @ _prelude.js:1(anonymous function) @ _prelude.js:1228../BarChart @ node_modules\react-d3\barchart\index.js:2s @ _prelude.js:1(anonymous function) @ _prelude.js:1248../areachart @ node_modules\react-d3\index.js:1s @ _prelude.js:1(anonymous function) @ _prelude.js:1404.react @ node_modules\react\react.js:3s @ _prelude.js:1e @ _prelude.js:1(anonymous function) @ _prelude.js:1

Also it is strange that I have to refresh the browser a couple of times (redoing npm start) to see the changes...

[sibbl]

Yep, that's the exact error this issue is about ;) Good to know I'm not the only one and the problem seems to be the way of ES6 style importing the library.

I have no idea why you have to refresh the browser a couple of times. Maybe compiling is still in progress...? Works perfectly for me, especially in my dev workflow with livereload and other neat tools.

[yang-wei]

Still no luck to reproduce the error

react-3d-sample-updated ❯ node -v                                              
v5.1.0

Is that possible that its related to this issue ?

[nightlyop]

I'm using node 5.4.1 npm 3.3.12 on Windows 7.

[yang-wei]

npm install rd3

Should solve this

[julkue]

This is a general problem in strict mode, when uglifying all files into a single one, e.g. with UglifyJS.