From f2a05bed1e2a1150e8f1823bfed2d12a219d6ad0 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartin.dev>
Date: Mon, 2 Aug 2021 10:28:51 -0400
Subject: [PATCH] fix(react): add SSR check to IonTabs (#23696)

resolves #23651
---
 packages/react/src/components/navigation/IonTabs.tsx | 5 +++--
 packages/react/src/utils/HTMLElementSSR.ts           | 4 ++++
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 packages/react/src/utils/HTMLElementSSR.ts

diff --git a/packages/react/src/components/navigation/IonTabs.tsx b/packages/react/src/components/navigation/IonTabs.tsx
index d4771275c4..151918622e 100644
--- a/packages/react/src/components/navigation/IonTabs.tsx
+++ b/packages/react/src/components/navigation/IonTabs.tsx
@@ -3,18 +3,19 @@ import React, { Fragment } from 'react';
 
 import { NavContext } from '../../contexts/NavContext';
 import PageManager from '../../routing/PageManager';
+import { HTMLElementSSR } from '../../utils/HTMLElementSSR';
 import { IonRouterOutlet } from '../IonRouterOutlet';
 
 import { IonTabBar } from './IonTabBar';
 import { IonTabsContext, IonTabsContextState } from './IonTabsContext';
 
-class IonTabsElement extends HTMLElement {
+class IonTabsElement extends HTMLElementSSR {
   constructor() {
     super();
   }
 }
 
-if (window && window.customElements) {
+if (typeof (window as any) !== 'undefined' && window.customElements) {
   const element = customElements.get('ion-tabs');
   if (!element) {
     customElements.define('ion-tabs', IonTabsElement);
diff --git a/packages/react/src/utils/HTMLElementSSR.ts b/packages/react/src/utils/HTMLElementSSR.ts
new file mode 100644
index 0000000000..a65188e8c6
--- /dev/null
+++ b/packages/react/src/utils/HTMLElementSSR.ts
@@ -0,0 +1,4 @@
+export const HTMLElementSSR = (
+  typeof HTMLElement !== 'undefined'
+  ? HTMLElement
+  : class {}) as typeof HTMLElement;