Skip to content

bug: ion-input not working properly with vite and @ionic/core #30323

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom
Open
3 tasks done
DeJy opened this issue Apr 1, 2025 · 15 comments
Open
3 tasks done

bug: ion-input not working properly with vite and @ionic/core #30323

DeJy opened this issue Apr 1, 2025 · 15 comments
Assignees
@christian-bromann

Comments

@DeJy
Copy link

DeJy commented Apr 1, 2025

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

  1. see stackblitz.com project

Code Reproduction URL

https://stackblitz.com/edit/sb1-tqcwwalu?file=package.json

Ionic Info

Issue is with all v8 versions

Additional Information

No response
@ionitron-bot ionitron-bot bot added the triage label Apr 1, 2025
@brandyscarney brandyscarney added the needs: investigation This issue is waiting on more investigation from the Ionic Team. label Apr 1, 2025
@ionitron-bot ionitron-bot bot removed the triage label Apr 1, 2025
@brandyscarney
Copy link
Member

Thank you for the issue! It looks like this broke in @ionic/core@8.2.7 with the update of Stencil to @stencil/core@4.20.0. I have added needs investigation to this ticket so that we can look into this further. I also created a dev build that downgrades Stencil if you would like to test that out: npm i @ionic/core@8.5.3-dev.11743533952.19f90358

@brandyscarney
Copy link
Member

Additionally, I noticed adding this script to the <head> of the index.html works to include the styles if you want to try that approach until we find a solution:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>

@DeJy
Copy link
Author

DeJy commented Apr 1, 2025

this one is working as expected: @ionic/core@8.5.3-dev.11743533952.19f90358

@christian-bromann christian-bromann self-assigned this Apr 3, 2025
@christian-bromann
Copy link
Member

@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>

?

@DeJy
Copy link
Author

DeJy commented Apr 3, 2025

I'm expecting this

<ion-input label-placement="fixed" class="sc-ion-input-md-h sc-ion-input-md-s md input-label-placement-fixed hydrated">
   <label class="input-wrapper sc-ion-input-md" for="ion-input-0">
     <div class="label-text-wrapper sc-ion-input-md">
       <div class="label-text sc-ion-input-md">Fixed label</div>
     </div>
     <div class="native-wrapper sc-ion-input-md sc-ion-input-md-s">
       <input class="native-input sc-ion-input-md" id="ion-input-0" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-0" placeholder="Enter text" spellcheck="false" type="text" />
     </div>
     <div class="input-highlight sc-ion-input-md">
     </div>
   </label>
 </ion-input>

But I'm getting this

<ion-input label-placement="fixed" class="sc-ion-input-md-h sc-ion-input-md-s md input-label-placement-fixed 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>
     <div class="input-highlight">
     </div>
   </label>
 </ion-input>

@DeJy
Copy link
Author

DeJy commented Apr 4, 2025

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.
https://stackblitz.com/edit/sb1-tqcwwalu?file=package.json

@christian-bromann
Copy link
Member

Identified the responsible change in Stencil: stenciljs/core#5892

@christian-bromann
Copy link
Member

@DeJy can you help me understand what you are using the class names for?

@DeJy
Copy link
Author

DeJy commented Apr 4, 2025 •
edited
Loading

I'm not usign any specific ionic class names or ovewrite any of them in my custom css.
I'm just using this code <ion-input label="Fixed label" label-placement="fixed" placeholder="Enter text"></ion-input> which doesn't transpile and display correctly (see stackblitz exemple) when building my code with Vite and @ionic/core version 8.5.3. it works well with version 7.x..x of Ionic and with that build: @ionic/core@8.5.3-dev.11743533952.19f90358

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.

@christian-bromann christian-bromann mentioned this issue Apr 4, 2025
Merged
2 tasks
@christian-bromann
Copy link
Member

Thanks for your feedback @DeJy - I've identified the issue and raised a PR with a fix in stenciljs/core#6224

@christian-bromann christian-bromann removed the needs: investigation This issue is waiting on more investigation from the Ionic Team. label Apr 4, 2025
@christian-bromann
Copy link
Member

A fix is on its way in #30132

@christian-bromann
Copy link
Member

I published a dev build which resolves the issue: 8.5.4-dev.11743814940.14e938eb. I will work with the Ionic team to get the PR merged and published.

@DeJy
Copy link
Author

DeJy commented Apr 6, 2025 •
edited
Loading

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

@christian-bromann christian-bromann mentioned this issue Apr 7, 2025
Merged
2 tasks
Lulalaby added a commit to Aiko-IT-Systems/Discord-React-Components that referenced this issue Apr 8, 2025
@Lulalaby
fix(deps): update npm packages (#341)
bec9d50 
This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@stencil/core](https://stenciljs.com/)
([source](https://github.com/stenciljs/core)) | [`4.29.0` ->
`4.29.2`](https://renovatebot.com/diffs/npm/@stencil%2fcore/4.29.0/4.29.2)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@stencil%2fcore/4.29.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@stencil%2fcore/4.29.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@stencil%2fcore/4.29.0/4.29.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@stencil%2fcore/4.29.0/4.29.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@typescript-eslint/eslint-plugin](https://typescript-eslint.io/packages/eslint-plugin)
([source](https://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)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@typescript-eslint%2feslint-plugin/8.29.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@typescript-eslint%2feslint-plugin/8.29.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@typescript-eslint%2feslint-plugin/8.29.0/8.29.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@typescript-eslint%2feslint-plugin/8.29.0/8.29.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
|
[@typescript-eslint/parser](https://typescript-eslint.io/packages/parser)
([source](https://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)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@typescript-eslint%2fparser/8.29.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@typescript-eslint%2fparser/8.29.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@typescript-eslint%2fparser/8.29.0/8.29.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@typescript-eslint%2fparser/8.29.0/8.29.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
| [eslint](https://eslint.org)
([source](https://github.com/eslint/eslint)) | [`9.23.0` ->
`9.24.0`](https://renovatebot.com/diffs/npm/eslint/9.23.0/9.24.0) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/eslint/9.24.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/eslint/9.24.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/eslint/9.23.0/9.24.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/eslint/9.23.0/9.24.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
| [typescript](https://www.typescriptlang.org/)
([source](https://github.com/microsoft/TypeScript)) | [`5.8.2`
-> `5.8.3`](https://renovatebot.com/diffs/npm/typescript/5.8.2/5.8.3) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/typescript/5.8.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/typescript/5.8.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/typescript/5.8.2/5.8.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/typescript/5.8.2/5.8.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>stenciljs/core (@&#8203;stencil/core)</summary>

###
[`v4.29.2`](https://github.com/stenciljs/core/blob/HEAD/CHANGELOG.md#-4292-2025-04-07)

[Compare
Source](https://github.com/stenciljs/core/compare/v4.29.1...v4.29.2)

##### Bug Fixes

- **utils:** don't create sourcemap file if disabled
([#&#8203;6229](https://github.com/stenciljs/core/issues/6229))
([31a97d2](https://github.com/stenciljs/core/commit/31a97d2a90beef00299ebe337cb40f4cac4154dd))

###
[`v4.29.1`](https://github.com/stenciljs/core/blob/HEAD/CHANGELOG.md#-4291-2025-04-05)

[Compare
Source](https://github.com/stenciljs/core/compare/v4.29.0...v4.29.1)

##### Bug Fixes

- **runtime:** properly set scope classes
([#&#8203;6224](https://github.com/stenciljs/core/issues/6224))
([5982264](https://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
(@&#8203;typescript-eslint/eslint-plugin)</summary>

###
[`v8.29.1`](https://github.com/typescript-eslint/typescript-eslint/blob/HEAD/packages/eslint-plugin/CHANGELOG.md#8291-2025-04-07)

[Compare
Source](https://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
([#&#8203;10998](https://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
(@&#8203;typescript-eslint/parser)</summary>

###
[`v8.29.1`](https://github.com/typescript-eslint/typescript-eslint/blob/HEAD/packages/parser/CHANGELOG.md#8291-2025-04-07)

[Compare
Source](https://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://github.com/eslint/eslint/compare/v9.23.0...d49f5b7333e9a46aabdb0cff267a1d36cdbde598)

[Compare
Source](https://github.com/eslint/eslint/compare/v9.23.0...v9.24.0)

</details>

<details>
<summary>microsoft/TypeScript (typescript)</summary>

###
[`v5.8.3`](https://github.com/microsoft/TypeScript/compare/v5.8.2...68cead182cc24afdc3f1ce7c8ff5853aba14b65a)

[Compare
Source](https://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://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=-->
@christian-bromann
Copy link
Member

@DeJy we have logged the issue in stenciljs/core#6219 and look at this individually from this ticket.

@christian-bromann
Copy link
Member

A fix was released in Stencil and I was able to verify that this resolves the bug with the dev build 8.5.4-dev.11744646756.1244bf71

# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees

@christian-bromann christian-bromann

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@christian-bromann @brandyscarney @DeJy