Support React v16.x

[FGCorp]

when run my project i have facing with this error :TypeError: Cannot read property 'object' of undefined

from this file :myproject/node_modules/react-treelist/dist/react-treelist.js:1

[maheshsenni]

Do you have your code in GitHub (or somewhere else) so that I can take a look? It is very hard to identify the issue without taking a look. Have you looked at the demos? Just to ensure that all the config options are in place.

[FGCorp]

`import React from "react"; import axios from "axios"; import Page from "../../../components/Page"; import { Button, Modal } from "react-bootstrap"; import { ToastContainer, toast } from "react-toastify"; import Moment from "moment"; import TreeList from 'react-treelist';

const DATA=[ { id: 0, firstName: 'Parent 0', lastName: 'Level 1', joinedOn: 1469754615511 }, { id: 1, firstName: 'Child 0', lastName: 'Parent 0', employeeId: 5581, parentId: 0, joinedOn: 1469567615512 }, { id: 2, firstName: 'Nested 0', lastName: 'Child 0', employeeId: 2850, parentId: 1, joinedOn: 1469755615512 }, { id: 3, firstName: 'Nested 1', lastName: 'Child 0', employeeId: 8438, parentId: 1, joinedOn: 1434565615512 }, { id: 4, firstName: 'Nested 2', lastName: 'Child 0', employeeId: 6158, parentId: 1, joinedOn: 1469754567512 }, { id: 5, firstName: 'Nested 3', lastName: 'Child 0', employeeId: 2619, parentId: 1, joinedOn: 1469755615512 }, { id: 6, firstName: 'Nested 4', lastName: 'Child 0', employeeId: 1594, parentId: 1, joinedOn: 1469751235512 }, { id: 7, firstName: 'Child 1', lastName: 'Parent 0', employeeId: 9335, parentId: 0, joinedOn: 1469755615512 }, { id: 8, firstName: 'Nested 0', lastName: 'Child 1', employeeId: 7129, parentId: 7, joinedOn: 146979875512 }, { id: 9, firstName: 'Nested 1', lastName: 'Child 1', employeeId: 3997, parentId: 7, joinedOn: 1469757655512 }, { id: 10, firstName: 'Nested 2', lastName: 'Child 1', employeeId: 7585, parentId: 7, joinedOn: 1460985615512 }, { id: 11, firstName: 'Nested 3', lastName: 'Child 1', employeeId: 1989, parentId: 7, joinedOn: 1468765615512 }, { id: 12, firstName: 'Nested 4', lastName: 'Child 1', employeeId: 2449, parentId: 7, joinedOn: 1469755435512 }, { id: 13, firstName: 'Child 2', lastName: 'Parent 0', employeeId: 153, parentId: 0, joinedOn: 1469712315512 }, { id: 14, firstName: 'Nested 0', lastName: 'Child 2', employeeId: 4585, parentId: 13, joinedOn: 1469756715512 }, { id: 15, firstName: 'Nested 1', lastName: 'Child 2', employeeId: 5884, parentId: 13, joinedOn: 1469755615512 }, { id: 16, firstName: 'Nested 2', lastName: 'Child 2', employeeId: 2223, parentId: 13, joinedOn: 1469755876512 }, { id: 17, firstName: 'Nested 3', lastName: 'Child 2', employeeId: 6757, parentId: 13, joinedOn: 1469703415512 }, { id: 18, firstName: 'Nested 4', lastName: 'Child 2', employeeId: 4713, parentId: 13, joinedOn: 1469755615512 }, { id: 19, firstName: 'Child 3', lastName: 'Parent 0', employeeId: 8675, parentId: 0, joinedOn: 1469765415512 }, { id: 20, firstName: 'Nested 0', lastName: 'Child 3', employeeId: 3719, parentId: 19, joinedOn: 1469755615512 }, { id: 21, firstName: 'Nested 1', lastName: 'Child 3', employeeId: 3650, parentId: 19, joinedOn: 1469723415512 }, { id: 22, firstName: 'Nested 2', lastName: 'Child 3', employeeId: 6012, parentId: 19, joinedOn: 1469755615512 }, { id: 23, firstName: 'Nested 3', lastName: 'Child 3', employeeId: 2940, parentId: 19, joinedOn: 1469798715512 }, { id: 24, firstName: 'Nested 4', lastName: 'Child 3', employeeId: 4492, parentId: 19, joinedOn: 1469755615512 }, { id: 25, firstName: 'Child 4', lastName: 'Parent 0', employeeId: 8443, parentId: 0, joinedOn: 1469755615512 }, { id: 26, firstName: 'Nested 0', lastName: 'Child 4', employeeId: 4647, parentId: 25, joinedOn: 1469755615512 }, { id: 27, firstName: 'Nested 1', lastName: 'Child 4', employeeId: 7886, parentId: 25, joinedOn: 1469755615512 }, { id: 28, firstName: 'Nested 2', lastName: 'Child 4', employeeId: 8459, parentId: 25, joinedOn: 1469123615512 }, { id: 29, firstName: 'Nested 3', lastName: 'Child 4', employeeId: 2706, parentId: 25, joinedOn: 1445655615512 }, { id: 30, firstName: 'Nested 4', lastName: 'Child 4', employeeId: 3140, parentId: 25, joinedOn: 1469755615512 }, { id: 31, firstName: 'Parent 1', lastName: 'Level 1', joinedOn: 1469712345512 }, { id: 32, firstName: 'Child 0', lastName: 'Parent 1', employeeId: 353, parentId: 31, joinedOn: 1469987615512 }, { id: 33, firstName: 'Nested 0', lastName: 'Child 0', employeeId: 541, parentId: 32, joinedOn: 1469755615512 }, { id: 34, firstName: 'Nested 1', lastName: 'Child 0', employeeId: 9203, parentId: 32, joinedOn: 1469755543512 }, { id: 35, firstName: 'Nested 2', lastName: 'Child 0', employeeId: 4335, parentId: 32, joinedOn: 1469755615512 }, { id: 36, firstName: 'Nested 3', lastName: 'Child 0', employeeId: 4725, parentId: 32, joinedOn: 1469755615512 }, { id: 37, firstName: 'Nested 4', lastName: 'Child 0', employeeId: 9848, parentId: 32, joinedOn: 1469755615512 }, { id: 38, firstName: 'Child 1', lastName: 'Parent 1', employeeId: 1887, parentId: 31, joinedOn: 1469755615512 }, { id: 39, firstName: 'Nested 0', lastName: 'Child 1', employeeId: 5297, parentId: 38, joinedOn: 1469755615512 }, { id: 40, firstName: 'Nested 1', lastName: 'Child 1', employeeId: 7769, parentId: 38, joinedOn: 1469755615512 }, { id: 41, firstName: 'Nested 2', lastName: 'Child 1', employeeId: 1250, parentId: 38, joinedOn: 1469755615512 }, { id: 42, firstName: 'Nested 3', lastName: 'Child 1', employeeId: 3131, parentId: 38, joinedOn: 1469755615512 }, { id: 43, firstName: 'Nested 4', lastName: 'Child 1', employeeId: 385, parentId: 38, joinedOn: 1469755615512 }, { id: 44, firstName: 'Child 2', lastName: 'Parent 1', employeeId: 8282, parentId: 31, joinedOn: 1469755615512 }, { id: 45, firstName: 'Nested 0', lastName: 'Child 2', employeeId: 1044, parentId: 44, joinedOn: 1469755615512 }, { id: 46, firstName: 'Nested 1', lastName: 'Child 2', employeeId: 9206, parentId: 44, joinedOn: 1469755615512 }, { id: 47, firstName: 'Nested 2', lastName: 'Child 2', employeeId: 501, parentId: 44, joinedOn: 1469755615512 }, { id: 48, firstName: 'Nested 3', lastName: 'Child 2', employeeId: 1839, parentId: 44, joinedOn: 1469755615512 }, { id: 49, firstName: 'Nested 4', lastName: 'Child 2', employeeId: 1612, parentId: 44, joinedOn: 1469755615512 }, { id: 50, firstName: 'Child 3', lastName: 'Parent 1', employeeId: 1006, parentId: 31, joinedOn: 1469755615512 }, { id: 51, firstName: 'Nested 0', lastName: 'Child 3', employeeId: 7835, parentId: 50, joinedOn: 1469755615512 }, { id: 52, firstName: 'Nested 1', lastName: 'Child 3', employeeId: 5819, parentId: 50, joinedOn: 1469755615512 }, { id: 53, firstName: 'Nested 2', lastName: 'Child 3', employeeId: 9376, parentId: 50, joinedOn: 1469755615512 }, { id: 54, firstName: 'Nested 3', lastName: 'Child 3', employeeId: 6607, parentId: 50, joinedOn: 1469755615512 }, { id: 55, firstName: 'Nested 4', lastName: 'Child 3', employeeId: 6789, parentId: 50, joinedOn: 1469755615512 }, { id: 56, firstName: 'Child 4', lastName: 'Parent 1', employeeId: 5409, parentId: 31, joinedOn: 1469755615512 }, { id: 57, firstName: 'Nested 0', lastName: 'Child 4', employeeId: 2225, parentId: 56, joinedOn: 1469755615512 }, { id: 58, firstName: 'Nested 1', lastName: 'Child 4', employeeId: 5143, parentId: 56, joinedOn: 1469755615512 }, { id: 59, firstName: 'Nested 2', lastName: 'Child 4', employeeId: 196, parentId: 56, joinedOn: 1469755615512 }, { id: 60, firstName: 'Nested 3', lastName: 'Child 4', employeeId: 7397, parentId: 56, joinedOn: 1469755615512 }, { id: 61, firstName: 'Nested 4', lastName: 'Child 4', employeeId: 5270, parentId: 56, joinedOn: 1469755615512 }, { id: 62, firstName: 'Parent 2', lastName: 'Level 1', joinedOn: 1469755615512 }, { id: 63, firstName: 'Child 0', lastName: 'Parent 2', employeeId: 3335, parentId: 62, joinedOn: 1469755615512 }, { id: 64, firstName: 'Nested 0', lastName: 'Child 0', employeeId: 4289, parentId: 63, joinedOn: 1469755615512 }, { id: 65, firstName: 'Nested 1', lastName: 'Child 0', employeeId: 2260, parentId: 63, joinedOn: 1469755615512 }, { id: 66, firstName: 'Nested 2', lastName: 'Child 0', employeeId: 3104, parentId: 63, joinedOn: 1469755615512 }, { id: 67, firstName: 'Nested 3', lastName: 'Child 0', employeeId: 3708, parentId: 63, joinedOn: 1469755615512 }, { id: 68, firstName: 'Nested 4', lastName: 'Child 0', employeeId: 7527, parentId: 63, joinedOn: 1469755615512 }, { id: 69, firstName: 'Child 1', lastName: 'Parent 2', employeeId: 7473, parentId: 62, joinedOn: 1469755615512 }, { id: 70, firstName: 'Nested 0', lastName: 'Child 1', employeeId: 4614, parentId: 69, joinedOn: 1469755615512 }, { id: 71, firstName: 'Nested 1', lastName: 'Child 1', employeeId: 5115, parentId: 69, joinedOn: 1469755615512 }, { id: 72, firstName: 'Nested 2', lastName: 'Child 1', employeeId: 2893, parentId: 69, joinedOn: 1469755615512 }, { id: 73, firstName: 'Nested 3', lastName: 'Child 1', employeeId: 9639, parentId: 69, joinedOn: 1469755615512 }, { id: 74, firstName: 'Nested 4', lastName: 'Child 1', employeeId: 6050, parentId: 69, joinedOn: 1469755615512 }, { id: 75, firstName: 'Child 2', lastName: 'Parent 2', employeeId: 5128, parentId: 62, joinedOn: 1469755615512 }, { id: 76, firstName: 'Nested 0', lastName: 'Child 2', employeeId: 7137, parentId: 75, joinedOn: 1469755615512 }, { id: 77, firstName: 'Nested 1', lastName: 'Child 2', employeeId: 4895, parentId: 75, joinedOn: 1469755615512 }, { id: 78, firstName: 'Nested 2', lastName: 'Child 2', employeeId: 6415, parentId: 75, joinedOn: 1469755615512 }, { id: 79, firstName: 'Nested 3', lastName: 'Child 2', employeeId: 9095, parentId: 75, joinedOn: 1469755615512 }, { id: 80, firstName: 'Nested 4', lastName: 'Child 2', employeeId: 3632, parentId: 75, joinedOn: 1469755615512 }, { id: 81, firstName: 'Child 3', lastName: 'Parent 2', employeeId: 5605, parentId: 62, joinedOn: 1469755615512 }, { id: 82, firstName: 'Nested 0', lastName: 'Child 3', employeeId: 8343, parentId: 81, joinedOn: 1469755615512 }, { id: 83, firstName: 'Nested 1', lastName: 'Child 3', employeeId: 8446, parentId: 81, joinedOn: 1469755615512 }, { id: 84, firstName: 'Nested 2', lastName: 'Child 3', employeeId: 3481, parentId: 81, joinedOn: 1469755615512 }, { id: 85, firstName: 'Nested 3', lastName: 'Child 3', employeeId: 3525, parentId: 81, joinedOn: 1469755615512 } ]; const COLUMNS = [{ title: 'ID', field: 'id', type: 'number', width: 100 }, { title: 'First Name', field: 'firstName', type: 'string', expand: true, }, { title: 'Last Name', field: 'lastName', type: 'string' }, { title: 'Employee ID', field: 'employeeId', type: 'number', class: 'red', formatter: function(value) { if (value) { return 'EMPID' + value; } } }, { title: 'Joined on', field: 'joinedOn', type: 'date', format: 'dd/mm/yyyy' }];

const OPTIONS = { height: 350, minimumColWidth: 100, expandAll: true };

export default class clientMenuManage extends React.Component { constructor(props) { super(props); this.state = {

};

//bindings
this.add = this.add.bind(this)
this.update = this.update.bind(this)
this.handleAll = this.handleAll.bind(this)

}

render() { const { columns, options, data } = this.state;

return (
  <Page title="Manage">
        <TreeList
    data={DATA}
    columns={COLUMNS}
    options={OPTIONS}
    id={'id'}
    parentId={'parentId'}></TreeList>
  </Page>
);

} } ` here is my code

[maheshsenni]

I tried with the same data, column and options you had used and it works fine - see this fiddle. How are you importing react-treelist?

[maheshsenni]

Closing this issue as it is inactive. Open a new issue if you still facing the problem.

[xuefengwang]

Hi @maheshsenni , I'm running into the same problem. It seems it's related to React version. It works when I use ^15.1.0. But after I upgrade to ^16.3.2, then it throws the error: "TypeError: Cannot read property 'object' of undefined". Below is the stacktrace in the console:

react-treelist.js:1 Uncaught TypeError: Cannot read property 'object' of undefined at Object. (react-treelist.js:1) at t (react-treelist.js:1) at Object. (react-treelist.js:1) at t (react-treelist.js:1) at Object. (react-treelist.js:1) at t (react-treelist.js:1) at react-treelist.js:1 at react-treelist.js:1 at ./node_modules/react-treelist/dist/react-treelist.js (react-treelist.js:1) at Object../node_modules/react-treelist/dist/react-treelist.js (react-treelist.js:1) at webpack_require (bootstrap 9a836385ff5477f2b1e3:678) at fn (bootstrap 9a836385ff5477f2b1e3:88) at Object../src/App.js (App.css?9a66:26) at webpack_require (bootstrap 9a836385ff5477f2b1e3:678) at fn (bootstrap 9a836385ff5477f2b1e3:88) at Object../src/index.js (index.css?f255:26) at webpack_require (bootstrap 9a836385ff5477f2b1e3:678) at fn (bootstrap 9a836385ff5477f2b1e3:88) at Object.0 (registerServiceWorker.js:117) at webpack_require (bootstrap 9a836385ff5477f2b1e3:678) at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 9a836385ff5477f2b1e3:724) at bootstrap 9a836385ff5477f2b1e3:724

[maheshsenni]

@xuefengwang Let me take a look at this. Thanks for reporting.

[xuefengwang]

@maheshsenni Thanks for looking into this. Let me know if you need any more information. I used create-react-app to create the project for testing react-treelist.

[maheshsenni]

@xuefengwang re-opening the issue. This seems to be specific to React v16 as you said and the component was never test against it. I'll have a go at it this week.

[maheshsenni]

@xuefengwang I have published a new alpha version which supports React 16.x. You can try it out using npm i --save react-treelist@next. I have not made it the default version yet. You can try it out and let me know if it works for you. I'll make this the default version in the coming days.

[xuefengwang]

@maheshsenni Thanks a lot for the fix. I installed "next" version of treelist and it works with latest React v16!

[maheshsenni]

Thanks for validating. I'll push the new version to npm in the next couple of days.

[xuefengwang]

Great. Thanks! Just noticed the demo page isn't working. Is that because of this new change?

[maheshsenni]

Yes, it is. I have fixed it now and release next version 1.0.0.

[xuefengwang]

Thanks for fixing the demo!