bug: Not working with Astro

[mariusbolik]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

I installed Ionic inside an Astro project:

<script>
  import { initialize, loadingController, menuController, modalController, type IonicConfig } from '@ionic/core';
  import { defineCustomElements } from '@ionic/core/loader';
  import * as icons from 'ionicons/icons';
  import { addIcons } from 'ionicons';

  initialize({
    mode: 'ios'
  });
  defineCustomElements();

  for (const iconName in icons) {
    addIcons({ [iconName]: (icons as any)[iconName] });
  }
</script>

Everything works well after running npx run dev. BUT after deployment (or in preview mode: npx run preview), there are some errors in the browser console:

Expected Behavior

The Ionic/Astro App should behave the same while dev server is running and on server. If you think this error is releated to Astro instead if Ionic, please let me know. In this case I'll copy this issue to the Astro repo.

Steps to Reproduce

1. Visit Stackblitz
2. run npx astro dev -> It works
3. run npx astro build
4. run npx astro preview -> It doesn't work

Code Reproduction URL

https://stackblitz.com/edit/github-svnle1?file=src%2Flayouts%2FLayout.astro,src%2Fpages%2Findex.astro,astro.config.mjs&on=stackblitz

Ionic Info

Ionic:

Ionic CLI : 7.1.1

Utility:

cordova-res : 0.15.4 native-run (update available: 2.0.0) : 1.7.2

System:

NodeJS : v20.16.0 npm : 10.8.1 OS : macOS Unknown

Additional Information

No response

[sean-perkins]

@mariusbolik the example code production you provided is loading Ionic components correctly on my end. Can you try again to see if maybe it was a caching or dev-server issue?

[mariusbolik]

@sean-perkins Thank you for your Time! Could you please run npx astro build and npx astro preview in Stackblitz and see if the error occours?

[thetaPC]

Thank you for submitting the issue!

Please provide a minimal repro that isn't hosted on StackBlitz, preferably GitHub. This will remove any doubt that the issue is coming from 3rd parties like StackBlitz.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[thetaPC]

Closing due to the lack of a reproduction. If the issue persists, please open a new one with a minimal reproduction. Thanks!

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