Getting started example doesn't work

[abhinavkumar940]

Griddle version

1.0.0

Expected Behavior

Render data table

Actual Behavior

Throws error

Steps to reproduce

Just followed the getting started example from http://griddlegriddle.github.io/Griddle/docs/

Error details

ColumnDefinition.js:42 Uncaught TypeError: Cannot read property 'string' of undefined
    at eval (ColumnDefinition.js:42)
    at Object.../node_modules/griddle-react/dist/module/components/ColumnDefinition.js (app.js:1448)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at eval (index.js:15)
    at Object.../node_modules/griddle-react/dist/module/components/index.js (app.js:1880)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at eval (index.js:31)
    at Object.../node_modules/griddle-react/dist/module/index.js (app.js:1904)
(anonymous) @ ColumnDefinition.js:42
../node_modules/griddle-react/dist/module/components/ColumnDefinition.js @ app.js:1448
__webpack_require__ @ app.js:724
fn @ app.js:101
(anonymous) @ index.js:15
../node_modules/griddle-react/dist/module/components/index.js @ app.js:1880
__webpack_require__ @ app.js:724
fn @ app.js:101
(anonymous) @ index.js:31
../node_modules/griddle-react/dist/module/index.js @ app.js:1904
__webpack_require__ @ app.js:724
fn @ app.js:101
(anonymous) @ module.js:8
../node_modules/griddle-react/dist/module/module.js @ app.js:1916
__webpack_require__ @ app.js:724
fn @ app.js:101
(anonymous) @ CustomerIndex.jsx:23
./containers/CustomerIndex.jsx @ app.js:8358
__webpack_require__ @ app.js:724
fn @ app.js:101
(anonymous) @ CustomerIndex.jsx:29
(anonymous) @ CustomerIndex.jsx:114
./pages/CustomerIndex.jsx @ app.js:8556
__webpack_require__ @ app.js:724
fn @ app.js:101
(anonymous) @ index.js:52
./pages/index.js @ app.js:8628
__webpack_require__ @ app.js:724
fn @ app.js:101
(anonymous) @ routes.jsx:15
./routes.jsx @ app.js:8700
__webpack_require__ @ app.js:724
fn @ app.js:101
(anonymous) @ client.jsx:15
./client.jsx @ app.js:8298
__webpack_require__ @ app.js:724
fn @ app.js:101
(anonymous) @ client:1
0 @ app.js:8819
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794

My Code

render = () => {
    var data = [
      {
        "id": 0,
        "name": "Mayer Leonard",
        "city": "Kapowsin",
        "state": "Hawaii",
        "country": "United Kingdom",
        "company": "Ovolo",
        "favoriteNumber": 7
      },
    ];
    return (
      <div>
        <nav className="level">
          {/* Left side */}
          <div className="level-left">
            <div className="level-item">
              <h1 className="subtitle">Customers</h1>
            </div>
          </div>
          {/* Right side */}
          <div className="level-right">
            <p className="level-item">
              <Link to="/customers/new" className="button is-success">
              <span className="icon is-small">
      <i className="fas fa-bold"></i>
    </span>
              Create Customer</Link>
            </p>
          </div>
        </nav>

        <Griddle
          data={data}
          plugins={[plugins.LocalPlugin]}
        />

[unaimian]

Having the same issue.. anyone knows what causes this problem?

[MohamedLamineAllal]

Try to update to the latest version. I bet you installed with npm i --save react-griddle@beta (don't use beta). And use npm i --save react-griddle.

The reason is the propType, which was part of react core. And then in newer versions (which pretty old now) it was moved to it's own package.

Here captures to illustrate that. old: new:

The capture show the transpiled code.

Check the doc if it's not clear! https://reactjs.org/docs/typechecking-with-proptypes.html