-
Notifications
You must be signed in to change notification settings - Fork 13.5k
bug: ion-input not working properly with vite and @ionic/core #30323
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
Thank you for the issue! It looks like this broke in |
Additionally, I noticed adding this script to the <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script> |
this one is working as expected: @ionic/[email protected] |
@DeJy what do you mean by ion-input should display as ionic component and not standard html.? Are you expecting Ionic to render the component as follows: - <ion-input label="Fixed label" label-placement="fixed" placeholder="Enter text" class="sc-ion-input-md-h sc-ion-input-md-s md input-label-placement-fixed in-item hydrated">
+ <ion-input label="Fixed label" label-placement="fixed" placeholder="Enter text" class="sc-ion-input-md sc-ion-input-md-h sc-ion-input-md-s md input-label-placement-fixed in-item hydrated">
<!---->
<label class="input-wrapper" for="ion-input-0">
<div class="label-text-wrapper">
<div class="label-text">Fixed label</div>
</div>
<div class="native-wrapper sc-ion-input-md-s"><input class="native-input" id="ion-input-0" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-0" placeholder="Enter text" spellcheck="false" type="text"></div>
</label>
</ion-input> ? |
I'm expecting this
But I'm getting this
|
The issue is not only with ion-input. As you can see in the example below, ion-alert that is opening from the ion-select doesn't have the right format. |
Identified the responsible change in Stencil: stenciljs/core#5892 |
@DeJy can you help me understand what you are using the class names for? |
I'm not usign any specific ionic class names or ovewrite any of them in my custom css. The example of the html above is the outcome of the build when I use version 8.5.3 (not working/not expected) vs 7.x.x (working/expected) I hope this answers your question. |
Thanks for your feedback @DeJy - I've identified the issue and raised a PR with a fix in stenciljs/core#6224 |
A fix is on its way in #30132 |
I published a dev build which resolves the issue: |
@christian-bromann There is still an issue with LoadingController with the dev build (see here: https://stackblitz.com/edit/sb1-tqcwwalu?file=package.json), icon in the ion-spinner is not moving. The Loading pop-up style is now good, but the icon is not spinning as expected. Standalone ion-spinner is working well. |
This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@stencil/core](https://stenciljs.com/) ([source](https://redirect.github.com/stenciljs/core)) | [`4.29.0` -> `4.29.2`](https://renovatebot.com/diffs/npm/@stencil%2fcore/4.29.0/4.29.2) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [@typescript-eslint/eslint-plugin](https://typescript-eslint.io/packages/eslint-plugin) ([source](https://redirect.github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin)) | [`8.29.0` -> `8.29.1`](https://renovatebot.com/diffs/npm/@typescript-eslint%2feslint-plugin/8.29.0/8.29.1) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [@typescript-eslint/parser](https://typescript-eslint.io/packages/parser) ([source](https://redirect.github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser)) | [`8.29.0` -> `8.29.1`](https://renovatebot.com/diffs/npm/@typescript-eslint%2fparser/8.29.0/8.29.1) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [eslint](https://eslint.org) ([source](https://redirect.github.com/eslint/eslint)) | [`9.23.0` -> `9.24.0`](https://renovatebot.com/diffs/npm/eslint/9.23.0/9.24.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [typescript](https://www.typescriptlang.org/) ([source](https://redirect.github.com/microsoft/TypeScript)) | [`5.8.2` -> `5.8.3`](https://renovatebot.com/diffs/npm/typescript/5.8.2/5.8.3) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>stenciljs/core (@​stencil/core)</summary> ### [`v4.29.2`](https://redirect.github.com/stenciljs/core/blob/HEAD/CHANGELOG.md#-4292-2025-04-07) [Compare Source](https://redirect.github.com/stenciljs/core/compare/v4.29.1...v4.29.2) ##### Bug Fixes - **utils:** don't create sourcemap file if disabled ([#​6229](https://redirect.github.com/stenciljs/core/issues/6229)) ([31a97d2](https://redirect.github.com/stenciljs/core/commit/31a97d2a90beef00299ebe337cb40f4cac4154dd)) ### [`v4.29.1`](https://redirect.github.com/stenciljs/core/blob/HEAD/CHANGELOG.md#-4291-2025-04-05) [Compare Source](https://redirect.github.com/stenciljs/core/compare/v4.29.0...v4.29.1) ##### Bug Fixes - **runtime:** properly set scope classes ([#​6224](https://redirect.github.com/stenciljs/core/issues/6224)) ([5982264](https://redirect.github.com/stenciljs/core/commit/5982264793b81704a20815ea00737032257a436b)), closes [ionic-team/ionic-framework#30323](ionic-team/ionic-framework/issues/30323) </details> <details> <summary>typescript-eslint/typescript-eslint (@​typescript-eslint/eslint-plugin)</summary> ### [`v8.29.1`](https://redirect.github.com/typescript-eslint/typescript-eslint/blob/HEAD/packages/eslint-plugin/CHANGELOG.md#8291-2025-04-07) [Compare Source](https://redirect.github.com/typescript-eslint/typescript-eslint/compare/v8.29.0...v8.29.1) ##### 🩹 Fixes - **eslint-plugin:** \[no-deprecated] report on deprecated imported variable used as property ([#​10998](https://redirect.github.com/typescript-eslint/typescript-eslint/pull/10998)) ##### ❤️ Thank You - Ronen Amiel You can read about our [versioning strategy](https://main--typescript-eslint.netlify.app/users/versioning) and [releases](https://main--typescript-eslint.netlify.app/users/releases) on our website. </details> <details> <summary>typescript-eslint/typescript-eslint (@​typescript-eslint/parser)</summary> ### [`v8.29.1`](https://redirect.github.com/typescript-eslint/typescript-eslint/blob/HEAD/packages/parser/CHANGELOG.md#8291-2025-04-07) [Compare Source](https://redirect.github.com/typescript-eslint/typescript-eslint/compare/v8.29.0...v8.29.1) This was a version bump only for parser to align it with other projects, there were no code changes. You can read about our [versioning strategy](https://main--typescript-eslint.netlify.app/users/versioning) and [releases](https://main--typescript-eslint.netlify.app/users/releases) on our website. </details> <details> <summary>eslint/eslint (eslint)</summary> ### [`v9.24.0`](https://redirect.github.com/eslint/eslint/compare/v9.23.0...d49f5b7333e9a46aabdb0cff267a1d36cdbde598) [Compare Source](https://redirect.github.com/eslint/eslint/compare/v9.23.0...v9.24.0) </details> <details> <summary>microsoft/TypeScript (typescript)</summary> ### [`v5.8.3`](https://redirect.github.com/microsoft/TypeScript/compare/v5.8.2...68cead182cc24afdc3f1ce7c8ff5853aba14b65a) [Compare Source](https://redirect.github.com/microsoft/TypeScript/compare/v5.8.2...v5.8.3) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://redirect.github.com/renovatebot/renovate/discussions) if that's undesired. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/Aiko-IT-Systems/Discord-React-Components). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOS4yMjcuMyIsInVwZGF0ZWRJblZlciI6IjM5LjIyNy4zIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJkZXBlbmRlbmNpZXMiXX0=-->
@DeJy we have logged the issue in stenciljs/core#6219 and look at this individually from this ticket. |
A fix was released in Stencil and I was able to verify that this resolves the bug with the dev build |
This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@stencil/core](https://stenciljs.com/) ([source](https://redirect.github.com/stenciljs/core)) | [`4.29.3` -> `4.30.0`](https://renovatebot.com/diffs/npm/@stencil%2fcore/4.29.3/4.30.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [@types/node](https://redirect.github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/node) ([source](https://redirect.github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node)) | [`22.14.1` -> `22.15.0`](https://renovatebot.com/diffs/npm/@types%2fnode/22.14.1/22.15.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [@typescript-eslint/eslint-plugin](https://typescript-eslint.io/packages/eslint-plugin) ([source](https://redirect.github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin)) | [`8.30.1` -> `8.31.0`](https://renovatebot.com/diffs/npm/@typescript-eslint%2feslint-plugin/8.30.1/8.31.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [@typescript-eslint/parser](https://typescript-eslint.io/packages/parser) ([source](https://redirect.github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser)) | [`8.30.1` -> `8.31.0`](https://renovatebot.com/diffs/npm/@typescript-eslint%2fparser/8.30.1/8.31.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | | [eslint](https://eslint.org) ([source](https://redirect.github.com/eslint/eslint)) | [`9.25.0` -> `9.25.1`](https://renovatebot.com/diffs/npm/eslint/9.25.0/9.25.1) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>stenciljs/core (@​stencil/core)</summary> ### [`v4.30.0`](https://redirect.github.com/stenciljs/core/blob/HEAD/CHANGELOG.md#-4300-2025-04-24) [Compare Source](https://redirect.github.com/stenciljs/core/compare/v4.29.3...v4.30.0) ##### Features - **runtime:** export a render method from the runtime ([#​6245](https://redirect.github.com/stenciljs/core/issues/6245)) ([e6c0593](https://redirect.github.com/stenciljs/core/commit/e6c05939e59b63c71e586bf05b25c4435f97ff47)) #### 🐻 [4.29.3](https://redirect.github.com/stenciljs/core/compare/v4.29.2...v4.29.3) (2025-04-14) ##### Bug Fixes - **ssr:** add scoped classes during SSR ([#​6238](https://redirect.github.com/stenciljs/core/issues/6238)) ([3363017](https://redirect.github.com/stenciljs/core/commit/3363017df3f1ef6d2f3f5433cb0d15ebc7ba948d)), closes [#​6219](https://redirect.github.com/stenciljs/core/issues/6219) - **test:** don't always update snapshots ([b7e410b](https://redirect.github.com/stenciljs/core/commit/b7e410b961360b8efafe621b2782bc478d7c3d2b)) - **utils:** remove lookbehind regexp for better performance ([#​6236](https://redirect.github.com/stenciljs/core/issues/6236)) ([2f712bc](https://redirect.github.com/stenciljs/core/commit/2f712bc045f0abdbeea8a8441f983880322f65b9)), closes [#​6226](https://redirect.github.com/stenciljs/core/issues/6226) #### 🔋 [4.29.2](https://redirect.github.com/stenciljs/core/compare/v4.29.1...v4.29.2) (2025-04-07) ##### Bug Fixes - **utils:** don't create sourcemap file if disabled ([#​6229](https://redirect.github.com/stenciljs/core/issues/6229)) ([31a97d2](https://redirect.github.com/stenciljs/core/commit/31a97d2a90beef00299ebe337cb40f4cac4154dd)) #### 🌼 [4.29.1](https://redirect.github.com/stenciljs/core/compare/v4.29.0...v4.29.1) (2025-04-05) ##### Bug Fixes - **runtime:** properly set scope classes ([#​6224](https://redirect.github.com/stenciljs/core/issues/6224)) ([5982264](https://redirect.github.com/stenciljs/core/commit/5982264793b81704a20815ea00737032257a436b)), closes [ionic-team/ionic-framework#30323](ionic-team/ionic-framework/issues/30323) </details> <details> <summary>typescript-eslint/typescript-eslint (@​typescript-eslint/eslint-plugin)</summary> ### [`v8.31.0`](https://redirect.github.com/typescript-eslint/typescript-eslint/blob/HEAD/packages/eslint-plugin/CHANGELOG.md#8310-2025-04-21) [Compare Source](https://redirect.github.com/typescript-eslint/typescript-eslint/compare/v8.30.1...v8.31.0) ##### 🚀 Features - **eslint-plugin:** \[no-unnecessary-type-assertion] add option to ignore string const assertions ([#​10979](https://redirect.github.com/typescript-eslint/typescript-eslint/pull/10979)) ##### ❤️ Thank You - Nicolas Le Cam You can read about our [versioning strategy](https://main--typescript-eslint.netlify.app/users/versioning) and [releases](https://main--typescript-eslint.netlify.app/users/releases) on our website. </details> <details> <summary>typescript-eslint/typescript-eslint (@​typescript-eslint/parser)</summary> ### [`v8.31.0`](https://redirect.github.com/typescript-eslint/typescript-eslint/blob/HEAD/packages/parser/CHANGELOG.md#8310-2025-04-21) [Compare Source](https://redirect.github.com/typescript-eslint/typescript-eslint/compare/v8.30.1...v8.31.0) This was a version bump only for parser to align it with other projects, there were no code changes. You can read about our [versioning strategy](https://main--typescript-eslint.netlify.app/users/versioning) and [releases](https://main--typescript-eslint.netlify.app/users/releases) on our website. </details> <details> <summary>eslint/eslint (eslint)</summary> ### [`v9.25.1`](https://redirect.github.com/eslint/eslint/compare/v9.25.0...3ed4b3652d9fe3dfa4017d22a6ddbd15e3c6cd7a) [Compare Source](https://redirect.github.com/eslint/eslint/compare/v9.25.0...v9.25.1) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://redirect.github.com/renovatebot/renovate/discussions) if that's undesired. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/Aiko-IT-Systems/Discord-React-Components). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOS4yNDguNCIsInVwZGF0ZWRJblZlciI6IjM5LjI1Ny4zIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJkZXBlbmRlbmNpZXMiXX0=-->
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
Ion-input is not displayed correctly when I'm building my vanilla js project with vite.js. It works with version 7, but not with version 8. sc-ion-input-md is class is missing from the input tag.
Expected Behavior
ion-input should display as ionic component and not standard html.
Steps to Reproduce
Code Reproduction URL
https://stackblitz.com/edit/sb1-tqcwwalu?file=package.json
Ionic Info
Issue is with all v8 versions
Additional Information
No response
The text was updated successfully, but these errors were encountered: