mui-datatables服务端渲染报window未定义，空加载后触发Minified React error #130

安全阿岳

2026-9-27

问题原因

你遇到的新报错是使用null-loader跳过mui-datatables编译导致的：build-html阶段该模块会被处理为空对象，你导入的MUIDataTable组件实际为undefined，触发React错误#130（渲染值为undefined的组件），同时类继承逻辑读取undefined的prototype属性触发_inheritsLoose报错。

解决方法

首先删除你之前在`gatsby-node.js`里添加的null-loader相关webpack配置，再选择以下任意一种方案处理即可：

方案1：使用loadable/component实现客户端侧加载（推荐）

安装依赖：npm install @loadable/component
重构引入MUIDataTable的代码：

import loadable from '@loadable/component'
import React from 'react'

// 关闭ssr，仅在客户端加载组件
const MUIDataTable = loadable(() => import('mui-datatables'), {
  ssr: false,
  fallback: <div>加载中...</div>
})

// 后续组件内使用MUIDataTable的逻辑保持不变
const YourTableComponent = () => {
  const columns = [] // 你的列配置
  const data = [] // 你的表格数据
  const options = {} // 表格配置
  return <MUIDataTable title="表格标题" data={data} columns={columns} options={options} />
}

export default YourTableComponent

方案2：原生动态导入（无需额外依赖）

直接在useEffect中判断客户端环境后加载组件：

import React, { useState, useEffect } from 'react'

const YourTableComponent = () => {
  const [TableComponent, setTableComponent] = useState(null)

  useEffect(() => {
    // 仅客户端环境下加载组件
    import('mui-datatables').then(mod => {
      setTableComponent(() => mod.default)
    })
  }, [])

  // 服务端渲染阶段返回占位内容
  if (!TableComponent) return <div>加载中...</div>

  const columns = [] // 你的列配置
  const data = [] // 你的表格数据
  const options = {} // 表格配置
  return <TableComponent title="表格标题" data={data} columns={columns} options={options} />
}

export default YourTableComponent