3

I recently install react-data-grid component, and started to try to test it out. It should work from the documentation but I get a compilation error that I am not understanding. I would appreciate some help. Thanks.

Below is the error. I am getting

./node_modules/react-data-grid/lib/DataGrid.js 102:37
Module parse failed: Unexpected token (102:37)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
|   const clientHeight = height - 2 // border width
>   - totalHeaderHeight - (summaryRows?.length ?? 0) * rowHeight - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
|   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(clientHeight, rowHeight, scrollTop, rows.length);
|   /**

This is my code :

import React from 'react';
import ReactDataGrid from 'react-data-grid';
import './App.css';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' },
  { key: 'count', name: 'Count' }];

const rows = [{ id: 0, title: 'row1', count: 20 }, { id: 1, title: 'row1', count: 40 }, { id: 2, title: 'row1', count: 60 }];

function App() {
  return (
    <ReactDataGrid
      columns={columns}
      rowGetter={i => rows[i]}
      rowsCount={3}
      minHeight={150} />
  );
}

export default App;

Thanks!

Derrick Omanwa
  • 457
  • 1
  • 5
  • 23
  • You have to go to `./node_modules/react-data-grid/lib/DataGrid.js` line 102, at position 37, check what is there. Apparently there is something that babel-loader can't compile. – givehug Jul 07 '20 at 23:17
  • `npm install react-data-grid@5.0.1` worked for me – Gonki Jul 30 '20 at 03:11

1 Answers1

0

I believe the problem is that the react-data-grid code is using nullish coalescing and optional chaining, introduced in ES2020. See this snippet highlighted in the error message: summaryRows?.length ?? 0.

Since it hasn't been transpiled to something that is compatible with the environment in which you're running the code, you need to do so yourself by configuring babel with plugins to handle this.

Here are the babel plugins to handle this:

I had the same issue in a Create React App based project and solved it by adding IE 11 to both arrays in the browserslist prop in package.json.

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all",
    "IE 11"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version",
    "IE 11"
  ]
}
Gustaf Lundström
  • 58
  • 5