Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: #19975
Rendering any Ionic component wrapped by createComponent on the server will cause an error:

ReferenceError: document is not defined
    at isCoveredByReact (\node_modules\@ionic\react\dist\index.js:267:50)

This makes Ionic incompatible with frameworks such as Gatsby or Next.js

What is the new behavior?

• isCoveredByReact is only called if the code is running in the browser.
• No events are passed to the web component if the renderer is not running in the browser.

Does this introduce a breaking change?

• Yes
• No

Other information

This fix mirrors a commit on the stencil-ds-plugins repository: ionic-team/stencil-ds-output-targets@b7b69ee

The ReactDOMServer passes the source code of an event handler as a string to the client if it does not recognize the element id. Therefore, an extra check for the onClick handler of routerLinkComponents was added. Without this check, this is the HTML sent to the client:

<ion-item onClick="(e) =&gt; {
    const { routerLink, routerDirection } = this.props;
    if (routerLink !== undefined) {
        e.preventDefault();
        this.context.navigate(routerLink, routerDirection);
    }
}">

The client side ReactDOM does not do this and can deal with onClick just fine. This was an interesting finding.