Gatsby build fails with error "HTMLElement is not defined"

Question

I'm using Ionic React with Gatsby. When I try to gatsby build it fails with HTMLElement is not defined

It's compiling about the Ionic component which i'm not using (Please check error info below).

I cannot use setWebpackConfig to ignore the module because it looks like Ionic React is heavily depended on window

How do I build SSG for Ionic React?

ERROR #95313

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html


  956 | const IonTabBar = createForwardRef(IonTabBarContainer, 'IonTabBar');
  957 |
> 958 | class IonTabsElement extends HTMLElement {
      | ^
  959 |     constructor() {
  960 |         super();
  961 |     }


  WebpackError: ReferenceError: HTMLElement is not defined

  - index.esm.js:958
    [test]/[@ionic]/react/dist/index.esm.js:958:1

  - ionic01.tsx:1
    src/pages/ionic01.tsx:1:1

  - animation-a635a2fc.js:493
    [test]/[@ionic]/core/dist/esm-es5/animation-a635a2fc.js:493:1

  - animation-a635a2fc.js:513
    [test]/[@ionic]/core/dist/esm-es5/animation-a635a2fc.js:513:1

  - animation-a635a2fc.js:337
    [test]/[@ionic]/core/dist/esm-es5/animation-a635a2fc.js:337:1

  - animation-a635a2fc.js:236
    [test]/[@ionic]/core/dist/esm-es5/animation-a635a2fc.js:236:1


error Command failed with exit code 1.