React Data Grid failing to compile

user_12858019 0
Viewed 1462

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!

react-data-grid reactjs
1 Answers

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"
  ]
}
user_117026330
Related