Error: TypeError: Cannot read property 'tree' of undefined

[Akrion]

I am trying to use this module in a project and with the provided demo tree I can not load the component at all. Issues I noticed are:

• The clean install does not work since it seems we have a dependency on d3 which I had to install in addition to get the app off the ground.
• From the documentation it is not very clear if the following properties are required:
  • onConfigChange
  • loadConfig
• After the d3 install I am getting the error:

TypeError: Cannot read property 'tree' of undefined

My whole App.js is:

import React from 'react';
import './App.css';
import OrgChart from '@unicef/react-org-chart'

let tree = {
  id: 1,
  person: {
    id: 1,
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/spbroma/128.jpg',
    department: '',
    name: 'Jane Doe',
    title: 'CEO',
    totalReports: 1
  },
  hasChild: true,
  hasParent: false,
  isHighlight: true,
  children: [
    {
    id: 2,
    person: {
      id: 2,
      avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/spbroma/128.jpg',
      department: '',
      name: 'John Foo',
      title: 'CTO',
      totalReports: 0
    },
    hasChild: false,
    hasParent: true,
    isHighlight: false,
    children: []
  }]
}

function App() {
  return (
    <div className="App">
      <OrgChart tree={tree} />
    </div>
  );
}

export default App;

my-app.zip

[Akrion]

I was able to make some progress on this by adding exactly the 3.5.17 d3 version to the package.json. D3 latest version is not compatible.

[itsnotme01]

Thank you, I had the same error and it solved it, did you found a way to display something?

[tdozi]

I believe this is related to layout method in d3: https://github.com/unicef/react-org-chart/issues/11