Error to import loadingController in React after upgraded to ionic 6

Ionic Framework Ionic React
1

Hello!

I upgraded to ionic version 6 and at coding level everything went very well. Reaching the end of the update of my application, I generated a production version and when accessing the application on my node server, I ran into this error right on the login screen:

image
image1311×197 10.6 KB

For the sake of detail, the error occurred when trying to call the following code:

Generic Alert Statement

const loader = (
  mensagem = "Aguarde...",
  tipo = "bubbles",
  css = "",
  id = "loader"
) =>
  loadingController.create({
    id: id || "loader",
    spinner: tipo,
    message: mensagem,
    translucent: true,
    cssClass: css,
    backdropDismiss: false
  });

Calling this controller at a certain point in the application:

const loading = await loader((reconectar ? 'Validando sessão...' : 'Aguarde...'));

loading.present(); <---error occurs here...

I don’t understand if there was any failure when performing the production build that would have resulted in this problem, as nothing is reported and it is still reported:

Uncaught (in promise) TypeError: (intermediate value)(intermediate value).present is not a function

Help please!

2

this is how I use it

  async genericLoader() {
    this.loading = await this.loadingCtrl.create({
      spinner: 'bubbles',
      duration: 5000,
      message: "reading data...',
      translucent: true,
    });
    return await this.loading.present();
  }
3

Thanks,

In case I’m using React. And I import the Loading like this:

import {
   loadingController,
   toastController,
   alertController
} from "@ionic/core";

This statement that you posted loadingCtrl does not for use cases with Angular or am I wrong?

4

Yes its angular, butni think you can use the example in the ionic docs

5

I am also getting this. I added a comment with a example project to this issue where someone reported it with the toastController.

6

Great guy. I will follow!

In your case this problem occurs at development time or after the ionic build (in production)??

In my case, in development I have no problems. But after the ionic build is the one who gives the error.

7

Ok, I just figured it out. We need to import from @ionic/vue and not @ionic/core. I guess in your case try @ionic/react / @ionic/angular.

It is happening for me in dev - ionic serve.

8

Excellent.

If possible, test if after ionic build, the error continues to occur in production and report it here. In my case the error still persists.

Ps: The production environment I’m talking about is not an ionic serve -s build but access the /build folder and start server via Node + Express for example.

thanks!

9

Works with a prod build too. Ran ionic build and through it on my local nginx server.

10

well,

I did my tests and really on Vue everything seems to work perfectly. I created a blank project and implemented my functions and everything happens normally both in dev and in production. In react, I did the same and the error only occurs in production.

Apparently it’s an implementation bug in @ionic/core.

I believe if you test the reverse, creating a blank app in react and running it will get the same result as mine.

Anyway, thank you!

11

Okay, I just found out. In the case of react we need to import from @ionic/core/components and not from @ionic/core.

I was already worried about this as it was preventing the app from launching into production. But now everything is fine apparently.