mui-datatable 服务器端渲染“WebpackError：ReferenceError：未定义窗口”答案

【问题标题】：mui-datatable server side rendering "WebpackError: ReferenceError: window is not defined"mui-datatable 服务器端渲染“WebpackError：ReferenceError：未定义窗口”
【发布时间】：2021-12-18 10:14:34
【问题描述】：

我尝试在 build-html 阶段跳过这个包：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /mui-datatables/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

但后来收到了：

在以下几行：

function _inheritsLoose(subClass, superClass) {
  4 |   subClass.prototype = Object.create(superClass.prototype);
> 5 |   subClass.prototype.constructor = subClass;
    | ^
  6 |   setPrototypeOf(subClass, superClass);
  7 | }

这是通过 gatsby build 中的构建消息抛出的：

WebpackError: Minified React error #130

从版本历史来看，似乎发生了同样的问题并在 3.1.3 中得到修复，但似乎又回来了。

【问题讨论】：

标签： webpack gatsby server-side-rendering mui-datatable

【解决方案1】：

在您的代码中引用了 MUIDatatable 的任何地方，您都需要进行显式检查，直到源更新：

{typeof window !== 'undefined' && <MUIDataTable
    title={""}
    data={faqData}
    columns={columns}
    options={options}
/> }

添加这些检查后，gatsby build 可以完成并且控件将在生产中工作。

【讨论】：