Preact项目导入ag-grid-react遇lint错误：JSX元素类型非构造函数

我之前也碰到过类似的情况，在Preact项目里用旧版本的ag-grid-react确实容易出现这个lint报错——核心原因是你用的17.x版本组件是为React设计的，它的类型定义和Preact的JSX系统不匹配，导致lint工具误判了组件的构造类型。下面给你几个可行的解决思路：

1. 通过构建工具别名适配Preact兼容层 #

Preact提供了preact/compat层来兼容React的API，我们可以通过别名配置，让ag-grid-react以为自己在调用React，实际用的是Preact的兼容实现：

• 如果用Webpack，在webpack.config.js里添加别名配置：

resolve: {
  alias: {
    'react': 'preact/compat',
    'react-dom': 'preact/compat'
  }
}

• 如果用Vite，在vite.config.js里配置：

export default defineConfig({
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom': 'preact/compat'
    }
  }
})

这个方法能同时解决运行时和类型层面的兼容问题，是最推荐的方案。

2. 手动修正TypeScript类型定义（针对TS项目） #

如果你的项目基于TypeScript，可以添加一个自定义类型声明文件来适配Preact：
在项目src目录下创建typings/ag-grid-react.d.ts，写入以下内容：

import { Component } from 'preact';
import { AgGridReactProps } from 'ag-grid-react';

declare module 'ag-grid-react' {
  export class AgGridReact extends Component<AgGridReactProps> {}
}

这样TS的lint工具会正确识别AgGridReact是Preact的组件类型，不再抛出错误。

3. 升级ag-grid到新版本（可选但更长远） #

你当前使用的17.x版本是2018年的旧版本，对Preact几乎没有官方支持。如果项目允许的话，升级到28.x及以上的ag-grid-react版本，新版本对Preact的兼容性更好，甚至有官方适配说明。不过升级需要注意API的变更，建议先在测试环境验证。

4. 临时规避lint错误（应急使用） #

如果上面的方案暂时没法落地，可以临时在lint规则里忽略这个错误：

• 在ESLint配置文件（.eslintrc.js）中添加规则：

rules: {
  'react/jsx-no-undef': 'off'
}

• 或者在使用AgGridReact的文件顶部添加注释：

/* eslint-disable react/jsx-no-undef */

注意：这只是临时应急方案，不推荐长期使用，还是建议从根源解决兼容性问题。

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