Electron环境下React应用集成数据网格触发Invalid Hook Call报错的排查与解决

问题描述 #

当前基于Electron框架开发React.js应用，计划搭建数据网格界面展示业务数据。最初使用Material-UI Data-Grid组件实现，运行时抛出未捕获错误，排查3天未定位到根因后，切换开源数据网格包react-data-grid，运行后出现完全相同的报错。需要确认该问题是自身代码逻辑问题，还是组件与Electron环境的兼容性问题，并给出对应修复方案。

相关代码片段 #

App.tsx（@material-ui/data-grid 实现版本） #

import React from 'react'
import ReactDOM from 'react-dom'
import { DataGrid } from '@material-ui/data-grid'

const App: React.FC = function () {
    return (
        <div style={{ textAlign: 'center' }}>
          <p>Hello</p>
        </div>
    )
}

const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'firstName', headerName: 'First name', width: 130 },
    { field: 'lastName', headerName: 'Last name', width: 130 },
    {
      field: 'age',
      headerName: 'Age',
      type: 'number',
      width: 90,
    },
    {
      field: 'fullName',
      headerName: 'Full name',
      description: 'This column has a value getter and is not sortable.',
      sortable: false,
      width: 160,
      valueGetter: (params: any) =>
        `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`,
    },
];
  
const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
    { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
    { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

function DataGridDemo() {
    return (
      <div style={{ height: 400, width: '100%' }}>
        <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
      </div>
    );
}

ReactDOM.render(<DataGridDemo />, document.getElementById('app'));

切换 react-data-grid 前的 package.json 依赖配置 #

{
  "dependencies": {
    "@material-ui/core": "^4.11.4",
    "@material-ui/data-grid": "^4.0.0-alpha.27",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mongodb": "^3.6.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "source-map-support": "^0.5.16",
    "typescript": "^4.2.4"
  },
  "devDependencies": {
    "@types/cors": "^2.8.10",
    "@types/express": "^4.17.11",
    "@types/mongodb": "^3.6.12",
    "@types/node": "13",
    "@types/react": "^17.0.4",
    "@types/react-dom": "^17.0.3",
    "@types/webpack-env": "^1.16.0",
    "electron": "12.0.5",
    "electron-builder": "^22.4.1",
    "electron-webpack": "^2.8.2",
    "electron-webpack-ts": "^4.0.1",
    "webpack": "~4.42.1"
  }
}

问题根因判定 #

该报错并非自身代码编写逻辑问题，也不是单个数据网格组件的兼容性问题，核心触发原因如下：

• 跨组件一致报错的共性逻辑：Material-UI DataGrid、react-data-grid这类现代前端数据网格组件，均依赖浏览器原生ResizeObserverAPI实现自适应布局测量能力。
• Electron环境兼容缺口：Electron 12.x版本默认开启沙箱模式，配合当前使用的electron-webpack 2.8.2版本（基于webpack 4构建）的默认打包配置，会移除部分现代浏览器API的Polyfill，导致渲染进程中无法识别ResizeObserver全局对象，触发所有依赖该API的组件抛出相同的未定义错误。

对应修复方案 #

• 方案一：在渲染进程入口文件最顶部，手动引入ResizeObserver兼容垫片，解决全局对象缺失问题。首先执行安装命令：

npm install resize-observer-polyfill

然后在App.tsx顶部增加如下代码：

// 引入ResizeObserver兼容实现
import ResizeObserver from 'resize-observer-polyfill';
// 将兼容实现挂载到全局window对象
window.ResizeObserver = ResizeObserver;

• 方案二：根据应用安全需求，调整Electron主进程的BrowserWindow配置，放宽渲染进程的沙箱限制。在创建窗口的webPreferences配置中增加对应参数：

webPreferences: {
  sandbox: false,
  contextIsolation: false,
  nodeIntegration: true
}

• 方案三：将electron-webpack升级到3.x大版本，该版本内置了现代前端组件常用的API Polyfill，可直接覆盖ResizeObserver等全局对象的兼容缺口。

内容的提问来源于stack exchange，提问作者AM2i9