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

Posted 2023-02-22

【中文标题】mui-datatable 服务器端渲染“WebpackError：ReferenceError：未定义窗口”

【英文标题】：mui-datatable server side rendering "WebpackError: ReferenceError: window is not defined"

【发布时间】：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 中得到修复，但似乎又回来了。

【参考方案1】：

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

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

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