Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

DOM in ViteJS development mode

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

DOM in ViteJS production preview mode

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

Issue Analytics

State:
Created 2 years ago
Reactions:4
Comments:8 (5 by maintainers)

Top GitHub Comments

3reactions

liamdebeasicommented, Jan 5, 2022

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/24515, and a fix will be available in an upcoming release of Ionic Framework.

3reactions

liamdebeasicommented, Dec 14, 2021

Hi everyone,

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

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

Top Results From Across the Web

Building for Production - Vite

The production bundle assumes support for modern JavaScript. By default, Vite targets browsers which support the native ES Modules, native ESM dynamic import, ......

Strict Mode - React

Strict mode checks are run in development mode only; they do not impact the production build. You can enable strict mode for any...

Vite and Antd error -> [vite:css] Inline JavaScript is not enabled ...

> vite build vite v2.9.13 building for production... ✓ 3811 modules transformed. [vite ...

vite build - patak-dev

But Vite also shines when building your app for production. ... by the vite:build-html plugin and replaced with a script module tag pointing ......

@prismicio/react Technical Reference - Documentation - Prismic

Since this is a general-purpose React library, it can be used in setups like Create React App and Vite or in more advanced...