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 https://github.com/heavysixer/d4/blob/1182ddaea0faa55fd60205d71cd3b3b624820a23/d4.js#L1176 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');