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.

CodePudding user response：

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.