d4.js:1172 Uncaught ReferenceError: d4 is not defined

[martinlendable]

Trying to use d4 with reactjs::

Getting: d4.js:1172 Uncaught ReferenceError: d4 is not defined

---

import React from 'react';
import ReactDOM from 'react-dom';
import ReactFauxDOM from 'react-faux-dom';

import d3 from 'd3';
import d4 from 'd4';

class App extends React.Component {

render () {
const data =
[
{x: "For Investment", y: 13.27},
{x: "For Distribution", y: 8.66},
{x: "Outstanding Principal", y: 5.22},
{x: "Accrued Interest", y: 5}
];

const myChart = d4.charts.column().width(500)

const d = d3.select(ReactFauxDOM.createElement('div'))
.datum(data).call(myChart);

return d.node().toReact()

}
}
export default App;

[heavysixer]

Hi @martinlendable, Unfortunately I have no React experience. Is the Component a closure because if so maybe you need to pass the reference of d4 to it.

[dylansmith]

This is not a React issue, but rather an issue with the way that D4 is internally reliant on the presence of a d4 global. I suspect if @martinlendable is using React and getting this error then it's because he's using webpack to build his code, and it fails at

d4/d4.js

Line 1176 in 1182dda

d4.helpers = {};

when webpack processes the import/require statement. I have the same issue in my Angular 1 codebase, using webpack as a builder.

[dylansmith]

@martinlendable as a workaround, you can use https://github.com/webpack/script-loader: require('script!d4');