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

[felquis]

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.

• bug: @ionic/react doesn't work [great] with Next.js #19975

mentions nextjs

• fix(ssr): Only set events in render function when running in browser #21249 (comment)
• feat: enable ssr for react #19795

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

• ionic / Angular Universal Serve SSR Error #21001
• Failed to construct 'HTMLElement' after updating to 4.0.1 #17411
• Uncaught ReferenceError: require is not defined on var channel = require('cordova/channel'); var platform = require('cordova/platform'); #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]

Current work around: next/dynamic with no ssr https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

[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

[felquis]

It did solve the issue in the reproduction repo.

[felquis]

Since after this issue, I've been using Ionic and found an unpredictable behaviour - I commented it out here #22718 (comment) could you triage if I should create a new issue for that case? Thank you.

[liamdebeasi]

Thanks for the issue. This has been resolved via #23696, and a fix will be available in an upcoming release of Ionic Framework.

For #22718 (comment), let's keep discussion in that thread since it seems to be related to the original post.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.