bug: Modals do not show components in production only

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
• Nightly

Current Behavior

In Ionic Vue, when creating modals through the modalController, the components will not show and will be rendered as comments. This will only happen, when building for production. In development mode the modals will render just fine.

Expected Behavior

Modals will render in productino as well.

Steps to Reproduce

Create an ionic project with ionic:

ionic start myApp blank --type vue

Create a button that triggers a new modal with the modalController and a minimal component like:

  const createSomeModal = await modalController.create({
    component: SomeModal,
  });
  createSomeModal.present();
  await createSomeModal.onDidDismiss();

Build for production

npm run build

And serve this anyhow, i used the php-webserver.

php -S 127.0.0.1:3000 -t dist

Now go on the website http://127.0.0.1:3000, open the modal and see no content. I made these reproduction steps in a repository here: https://github.com/schmop/ionic-modal-on-prod-broken

Code Reproduction URL

https://github.com/schmop/ionic-modal-on-prod-broken

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module ‘@capacitor/ios/package’

   Require stack:
   - C:\Users\schmop\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\schmop\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\schmop\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\schmop\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module ‘@capacitor/android/package’

   Require stack:
   - C:\Users\schmop\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\schmop\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\schmop\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\schmop\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 6.19.1 (C:\Users\schmop\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/vue 6.1.8

Capacitor:

Capacitor CLI : 3.5.1 @capacitor/android : not installed @capacitor/core : 3.5.1 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.6.0

System:

NodeJS : v16.14.0 (C:\Program Files\nodejs\node.exe) npm : 8.3.1 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I can reproduce this behavior, but it does not appear to be an Ionic bug.

When running the app in production mode, ion-modal is still defined, but Vue renders the inner component as a comment (<!---->). Ionic Vue does not handle the rendering of SomeModal as we pass that off to Vue.

---

I looked at your application’s built output and it appears that the template for SomeModal is not being included. However, the component definition is there (I can see the console.log("Component mounted", this); log in the built output). This likely leads to the behavior described here where the component is mounted in the modal, but nothing shows up.

I also noticed that calling the modalController from inside the Home component instead seems to fix the issue.

---

Can you try moving the modalController to Home and let me know if that resolves the issue?

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