Ion-alert / ion-toast erroring only on prod build

Stencil
1

I’m building a site with stencil and all is going well, except I’ve noticed that ion-alert and ion-toast are erroring but only in the prod build.

That is to say, when I’m developing using npm start all works fine, my alert looks like this:

ion-alert1

And there are no errors.

However once I build the app to deploy with npm run prod which calls stencil build --prerender then the alert doesn’t have a message, and throws a js error.

ion-alert2
ion-alert-error

ion-toast has the same behavior, working in dev, throwing the same error and not showing the message after build. I tried building without prerender, and the same behavior persists.

I have no idea how to debug this since it works during development, and the error is thrown in compiled/minified code.

The way I’m using the alert is pretty straight forward:

  alert(message: string, header?: string, subheader?: string) {
    return new Promise(resolve => {
      const alert = document.createElement('ion-alert');

      if (header) {
        alert.header = header;
      }

      if (subheader) {
        alert.subHeader = subheader;
      }

      alert.message = message;

      alert.buttons = [
        {
          text: 'Okay',
          handler: () => {
            resolve(true);
          }
        }
      ];

      document.body.appendChild(alert);
      return alert.present();
    });
  }

Any ideas?

2

I still haven’t been able to find a solution for this.
I built my own custom toast with basically the same API and it’s working fine. I’d rather not have to build a custom alert component when ion-alert exists. Anyone have any ideas?

3

Well, unfortunately I couldn’t find any solution using ion-alert, I still have no idea why it was erroring in prod only. If anyone else comes across this I gave up and created my own alert component, and it’s working fine.

4

You are developing your app with Stencil or vanilla JS? If stencil, try using the controllers

import {alertController} from '@ionic/core';

private async presentHighlightInfo() {
    const alert: HTMLIonAlertElement = await alertController.create({
            message: 'Hello.',
      buttons: ['Ok']
    });

    await alert.present();
  }