bug: react, vite, production build yields <tagname>

[milang]

Prerequisites

• 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

When using Ionic React version 6, release candidate 2 with ViteJS (latest, version 2.6.14), Ionic application works as expected in development mode. Production (preview) mode, however, causes all ion-... elements to be rendered as tagname, and shadow DOM nodes are missing.

This can be best seen by looking at DOM of a rendered application (see the reproduction repository below). In development mode you can see ion-app, ion-header and ion-content:

In production mode, the element structure is still there, but ion-... elements are replaced with tagname:

Expected Behavior

Production mode should still render ion-... + shadow DOM elements, otherwise the application is unusable.

Steps to Reproduce

To run the application in development mode (assuming yarn package manager) :

git clone https://github.com/milang/ionic-simplevitejs && cd ionic-simplevitejs
yarn && yarn run dev

To run the application in production preview mode:

yarn run build && yarn run serve

Code Reproduction URL

https://github.com/milang/ionic-simplevitejs

Ionic Info

No response

Additional Information

No response

[liamdebeasi]

Thanks! I spoke with the team and the fix appears to be related to something in Stencil: ionic-team/stencil#2959.

[iansjk]

Is there by chance a workaround for this in the short term? I've read the linked issue and attempted to use the custom resolution

"@stencil/core": "npm:@johnjenkins/stencil-community@^2.5.0"

but without any success (Vite still emits <tagname> in production builds).

[liamdebeasi]

There is no workaround at the moment. We are working closely with the Stencil team to resolve this.

[johnjenkins]

Sorry to chime in, but this is def not related to ionic-team/stencil#2959 :)
Some weird clash with jsx?

[liamdebeasi]

Not sure, but we are looking at this with the Stencil team to better pinpoint where the issue may be.

[liamdebeasi]

Hi everyone,

We believe this is a bug in the React plugin for Vite. We have filed an issue with the Vite team: vitejs/vite#6104

I will follow up here when I have more to share. Thanks!

[liamdebeasi]

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

[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.