如何在Next.js中使用Igr DataGrid？解决HTMLElement未定义错误

问题描述 #

你遇到的错误为：ReferenceError: HTMLElement is not defined，对应的代码如下：

import { IgrDataGrid } from "igniteui-react-grids";
import { IgrTextColumn } from "igniteui-react-grids";

const details = [
  {
    Name: "Jack",
    Company : "Google",
  },
  {
    Name: "Jack",
    Company : "Google",
  },
  {
    Name: "Jack",
    Company : "Google",
  },
  {
    Name: "Jack",
    Company : "Google",
  },
  {
    Name: "Jack",
    Company : "Google",
  },
  {
    Name: "Jack",
    Company : "Google",
  },
];

const table = () => {
  return (
      <h1>USER DETAILS</h1>
      <div>
        <div className="container">
          {
            <IgrDataGrid dataSource={details}>
              <IgrTextColumn field="Name" horizontalAlignment="center" />
              <IgrTextColumn field="Company" horizontalAlignment="center" />
            </IgrDataGrid>
          }
        </div>
      </div>
  );
};

export default table;

问题原因 #

错误源于Next.js默认的服务端渲染（SSR）机制：Igr DataGrid组件依赖浏览器环境中的HTMLElement对象，但服务端渲染阶段不存在这个浏览器专属API，因此抛出未定义错误。

解决方案 #

以下两种方法均可解决该问题：

方法1：动态导入并禁用SSR #

使用Next.js的next/dynamic工具动态导入组件，同时设置ssr: false，强制组件仅在客户端渲染：

import dynamic from 'next/dynamic';

// 动态导入Igr组件，禁用服务端渲染
const IgrDataGrid = dynamic(() => import('igniteui-react-grids').then(mod => mod.IgrDataGrid), { ssr: false });
const IgrTextColumn = dynamic(() => import('igniteui-react-grids').then(mod => mod.IgrTextColumn), { ssr: false });

const details = [
  { Name: "Jack", Company : "Google" },
  { Name: "Jack", Company : "Google" },
  { Name: "Jack", Company : "Google" },
  { Name: "Jack", Company : "Google" },
  { Name: "Jack", Company : "Google" },
  { Name: "Jack", Company : "Google" },
];

const Table = () => {
  return (
    <div>
      <h1>USER DETAILS</h1>
      <div className="container">
        <IgrDataGrid dataSource={details}>
          <IgrTextColumn field="Name" horizontalAlignment="center" />
          <IgrTextColumn field="Company" horizontalAlignment="center" />
        </IgrDataGrid>
      </div>
    </div>
  );
};

export default Table;

方法2：判断客户端环境后渲染 #

通过typeof window !== 'undefined'判断当前是否处于客户端环境，仅在客户端渲染Igr组件：

import { IgrDataGrid } from "igniteui-react-grids";
import { IgrTextColumn } from "igniteui-react-grids";

const details = [
  { Name: "Jack", Company : "Google" },
  { Name: "Jack", Company : "Google" },
  { Name: "Jack", Company : "Google" },
  { Name: "Jack", Company : "Google" },
  { Name: "Jack", Company : "Google" },
  { Name: "Jack", Company : "Google" },
];

const Table = () => {
  // 服务端渲染时返回加载占位
  if (typeof window === 'undefined') {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>USER DETAILS</h1>
      <div className="container">
        <IgrDataGrid dataSource={details}>
          <IgrTextColumn field="Name" horizontalAlignment="center" />
          <IgrTextColumn field="Company" horizontalAlignment="center" />
        </IgrDataGrid>
      </div>
    </div>
  );
};

export default Table;

额外提示 #

• 确保已正确安装依赖，未安装则执行：npm install igniteui-react-grids
• 方法1是更推荐的方案，能精准控制组件渲染时机，避免不必要的服务端开销

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