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

Question

I've tried to skip this package during the build-html stage with:

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

But then received:

At the following lines:

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

Which is thrown via build messsage in gatsby build:

WebpackError: Minified React error #130

From looking at the version history, it looks like this same issue occurred and was fixed in 3.1.3 but seems to be back.

Answer 1

Anywhere MUIDatatable is referenced in your code you'll need to do a explicit check until the source is updated:

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

After these checks are added gatsby build can complete and the controls will work in production.