mui-datatable server side rendering "WebpackError: ReferenceError: window is not defined"

Question

我试图在 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 构建中的构建消息抛出的：

WebpackError: Minified React error #130

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

Answer 1

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

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

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