React Data Grid 编译失败答案

【问题标题】：React Data Grid failing to compileReact Data Grid 编译失败
【发布时间】：2020-07-07 23:08:51
【问题描述】：

我最近安装了 react-data-grid 组件，并开始尝试测试它。它应该从文档中工作，但我得到一个我不理解的编译错误。我会很感激一些帮助。谢谢。

以下是错误。我得到了

./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);
|   /**

这是我的代码：

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;

谢谢！

【问题讨论】：

你必须去./node_modules/react-data-grid/lib/DataGrid.js第102行，在第37位，检查那里有什么。显然有些东西是 babel-loader 无法编译的。
npm install react-data-grid@5.0.1 为我工作

标签： reactjs react-data-grid

【解决方案1】：

我认为问题在于 react-data-grid 代码使用了 ES2020 中引入的无效合并和可选链接。请参阅错误消息中突出显示的此 sn-p：summaryRows?.length ?? 0。

由于它还没有被转换成与你运行代码的环境兼容的东西，你需要自己通过使用插件配置 babel 来处理它。

这里是处理这个问题的 babel 插件：

我在基于 Create React App 的项目中遇到了同样的问题，并通过将 IE 11 添加到 package.json 中 browserslist 属性中的两个数组来解决它。

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

【讨论】：