bug: react, tabs accesses values that are not defined in ssr environment

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

ReferenceError: HTMLElement is not defined
    at Object.<anonymous> (/Users/ofelquis/projects/folder-name/node_modules/@ionic/react/dist/index.js:1043:30)

Expected Behavior

• Smooth integration out of the box with SSR support

• Documentation should mention SSR on every framework guide page, even though it’s still work in progress

Steps to Reproduce

As mentioned at https://nextjs.org/docs/getting-started

1 - start nextjs project - Run:

yarn create next-app folder-name --typescript
cd folder-name

As mentioned at https://ionicframework.com/docs/intro/cdn#ionic-react

2 - install ionic deps - Run:

yarn add @ionic/react

Open pages/_app.tsx and add styles as mentioned at https://ionicframework.com/docs/intro/cdn#css

3 - use a component

Open pages/index.tsx and import

import { IonInput } from '@ionic/react'

And use it inside the jsx return

<IonInput placeholder="Type anything" />

4 - try to start development - run

yarn dev

5 - open the browser preview

ReferenceError: HTMLElement is not defined
    at Object.<anonymous> (/Users/ofelquis/projects/folder-name/node_modules/@ionic/react/dist/index.js:1043:30)

Code Reproduction URL

https://github.com/felquis/ionic-react-issue-report

Ionic Info

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

Ionic CLI : 6.16.3

Utility:

cordova-res : not installed globally native-run : not installed globally

System:

NodeJS : v16.3.0 npm : 7.15.1 OS : macOS Catalina

Additional Information

This project is not with cordova, nor ionic itself, I just want to use a few components from ionic in the react way in an already existing project made with nextjs for instance.

Issues I’ve found that does not mention the error I report here specifically.

• https://github.com/ionic-team/ionic-framework/issues/19975

mentions nextjs

• https://github.com/ionic-team/ionic-framework/pull/21249#issuecomment-717540499
• https://github.com/ionic-team/ionic-framework/issues/19795

does not mention nextjs even though the problem is relared to ssr

• https://github.com/ionic-team/ionic-framework/issues/21001
• https://github.com/ionic-team/ionic-framework/issues/17411
• https://github.com/ionic-team/ionic-framework/issues/10526

Offer Solution but not using the module @ionic/react

• https://wp-kyoto.net/en/using-ionic-framework-into-next-js-application-without-using-ionic-react/

Does not use @ionic/react at all

• https://github.com/vercel/next.js/blob/canary/examples/with-ionic-typescript/package.json

[felquis]

It did solve the issue in the reproduction repo.

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/react@5.7.0-dev.202107192155.86ece8f