LoadingController: TypeError: Cannot read property 'present' of undefined

Bug Report

Ionic version:

[x] 4.x

Current behavior:

When attempting to create a new loadingController, and when attempting to call any method on it, I receive the below error in my browser console: TypeError: Cannot read property 'present' of undefined’

I am using Ionic with Capacitor. I’m not sure if the issue should be filed with them or Ionic. I figured I would start here, since the issue is with Ionic’s loadingController feature.

Expected behavior: I should not be receiving this error, and this.loading should be defined.

Steps to reproduce:

1. Instantiate a new loadingController with await this.$ionic.loadingController.create()
2. Attempt to call any method on it
3. Receive an error that the newly created loadingController is undefined

Related code:

async presentLoading() {
            this.loading = await this.$ionic.loadingController.create();
            return await this.loading.present();
},

Other information:

Same issues as:

• https://github.com/ionic-team/ionic/issues/14800
• https://stackoverflow.com/questions/54053245/ionic-4-loading-present-is-not-a-function

Ionic info:

Ionic:

   ionic (Ionic CLI) : 4.5.0 (/usr/local/lib/node_modules/ionic)

System:

   NodeJS : v9.11.1 (/usr/local/bin/node)
   npm    : 6.5.0
   OS     : macOS Mojave

[uriannrima]

So, I’ve found a workaround for my issue trying to create a loading inside the vue’s mounted hook. I’ve simple added a setTimeout and created inside of it… As I was hoping that the problem was that the ionic hasn’t yet “kicked” in, and created the ion-loading-controller, so I’ve created a timeout to push the loading creation in the call stack, and well… it worked.

Before:

  async mounted() {
    const loader = await this.$ionic.loadingController.create({
      message: "Loading characters..."
    });
    loader.present();
    await this.loadCampaigns();
    loader.dismiss();
  },

After:

  async mounted() {
    setTimeout(async () => {
      const loader = await this.$ionic.loadingController.create({
        message: "Loading characters..."
      });
      loader.present();
      await this.loadCampaigns();
      loader.dismiss();
    }, 0);
  }

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!