bug: Not working with Astro

[mariusbolik]

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?