react-data-grid-addons has references to react.PropTypes which is breaking React16

[aschonfeld]

• Have you already searched for similar issues? Please help us out and double-check first!

• Also, please don't be that person who deletes this template. It's here for a reason.

• Thanks!

---

Which version of React JS are you using?

✅ Officially supported ✅

• [ ] v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

• [ ] v15.5.x
• [ ] v15.6.x

☣️ Not officially supported, expect warnings and errors ☣️

• [X] v16.x.x

---

Which browser are you using?

✅ Officially supported ✅

• [ ] IE 9 / IE 10 / IE 11
• [ ] Edge
• [ ] Chrome

⚠️ Not officially supported, but "should work" ⚠️

• [ ] Firefox
• [ ] Safari

---

I'm submitting a ...

• [X] 🐛 Bug Report
• [ ] 💡 Feature Request

👋 Need general support? Not sure about how to use React itself, or how to get started with the Grid?
Please do not submit support request here. Instead see

https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

---

Issue Details

when trying to run react-data-grid-addons with React16 I receive the following error:

TypeError: Cannot read property 'oneOfType' of undefined

Looks like there are a lot of files still referencing the old version of PropTypes

[amanmahajan7]

React 16 is not officially supported and we are working on the migration. PR (#954) migrated React.PropTypes to separate prop-types package and was merged yesterday.

[29er]

So is there a solution for this ??

[srikanthpavuluri]

React 16.
I'm trying to include the grouping as shown here - http://adazzle.github.io/react-data-grid/scripts/example21-grouping.js

Here are the imports -
`import React, { Component } from 'react';
import { Container, Row, Col, ListGroup, ListGroupItem } from 'reactstrap';
import faker from 'faker';
import PropTypes from 'prop-types';
const ReactDataGrid = require('react-data-grid');
const {
ToolsPanel: { AdvancedToolbar: Toolbar, GroupedColumnsPanel },
Data: { Selectors },
Draggable: { Container: DraggableContainer },
Formatters: { ImageFormatter }
} = require('react-data-grid-addons');

class CustomToolbar extends React.Component {
static propTypes = {
groupBy: React.PropTypes.array.isRequired,
onColumnGroupAdded: React.PropTypes.func.isRequired,
onColumnGroupDeleted: React.PropTypes.func.isRequired
};

render() {
  return (<Toolbar>
    <GroupedColumnsPanel groupBy={this.props.groupBy} onColumnGroupAdded={this.props.onColumnGroupAdded} onColumnGroupDeleted={this.props.onColumnGroupDeleted}/>
    </Toolbar>);
}

}
....
`

TypeError: Cannot read property 'oneOfType' of undefined
defineProperty.value
node_modules/react-data-grid-addons/dist/react-data-grid-addons.js:23881

How to resolve this error?

[amanmahajan7]

React 16 is not officially supported. Please check this comment.

[srikanthpavuluri]

Oh! Is there any alternative component or libraries similarly to this? Any possible tweaks to make it work as expected. when can we have support for React 16?

[srikanthpavuluri]

@amanmahajan7
Any updates? This been a blocker for me.

[amanmahajan7]

@srikanthpavuluri , you can try react-data-grid@next but this is still under development and it is not fully tested yet.
https://unpkg.com/[email protected]/