bug: toastController not showing after "Ionic Build", in react

[syafiqmuda]

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

v7.x

Current Behavior

I wanted to create a really basic toast.

src/pages/index.tsx:

<IonButton 
expand="block" 
onClick={() => { 
console.log("Button clicked"); showToast("Login with Google"); 
}} 
>Show Toast</IonButton>

src/utils/index.tsx:

export const showToast = async (
  message: string,
  color?: "primary" | "success" | "light" | "danger" | "medium" | "warning"
) => {
  const toast = await toastController.create({
    message: message,
    duration: 2000,
    position: "top",
    color: color || "medium",
    buttons: [
      {
        icon: close,
        role: "cancel",
      },
    ],
  });
  
  await toast.present();
};

Expected Behavior

On "Ionic Serve", it successfully show the toast,

BUT on "Ionic Build" it doesnt show any toast, error or console.log() after toastController.create().

Steps to Reproduce

1. run script "Ionic Build"
2. click on button to run the method showToast("Message here");

Ionic Info

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

   Require stack:
   - C:\Users\syafi\AppData\Roaming\nvm\v22.13.0\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\syafi\AppData\Roaming\nvm\v22.13.0\node_modules\@ionic\cli\lib\index.js
   - C:\Users\syafi\AppData\Roaming\nvm\v22.13.0\node_modules\@ionic\cli\index.js
   - C:\Users\syafi\AppData\Roaming\nvm\v22.13.0\node_modules\@ionic\cli\bin\ionic

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

   Require stack:
   - C:\Users\syafi\AppData\Roaming\nvm\v22.13.0\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\syafi\AppData\Roaming\nvm\v22.13.0\node_modules\@ionic\cli\lib\index.js
   - C:\Users\syafi\AppData\Roaming\nvm\v22.13.0\node_modules\@ionic\cli\index.js
   - C:\Users\syafi\AppData\Roaming\nvm\v22.13.0\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 7.2.0 (C:\Users\syafi\AppData\Roaming\nvm\v22.13.0\node_modules@ionic\cli)
Ionic Framework : @ionic/react 8.5.0

Capacitor:

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

Utility:

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

System:

NodeJS : v22.13.0 (C:\Program Files\nodejs\node.exe)
npm : 10.9.2
OS : Windows 10

Additional Information

No response

[thetaPC]

Thank you for submitting the issue!

The useIonToast function should be used when creating a toast controller in a React project. Do you still have build issues after switching to useIonToast? I highly recommend reviewing the example for React under the Controller Toasts section.

[syafiqmuda]

So I am unable to use toastController same as alertController? Using useIonToast wont be an issue for me as it work perfectly fine. it just I want to fine tuning the "Toast" which is, I already set the option based on the way I want, and just reuse it function. because the default it not same as the way I want it.

Quick question, what if I create a "manager" like function and initialize the toast in App.tsx?

[thetaPC]

@syafiqmuda The useIonAlert function should be used when creating an alert controller in a React project. toastController and alertController are meant for vanilla JavaScript projects. You can review how to create the alert controller for React under the Controller Alerts section.

It doesn't hurt to try to make a manager but I would recommend keeping it simple first and creating it on the page that it's needed.

Does this information resolve your issue?

[syafiqmuda]

TQ for the clarification, it seem using toastController would cause problem in production, no matter how you modify it. The solution I get is by creating a Toast context and wrap it in the <App> or any other react component or ionic component

/main.tsx OR /App.tsx:

<AuthProvider>
 // component here
</AuthProvider>

toastContext.tsx

    ...
      {children}
      <IonToast
        isOpen={!!toast}
        message={toast?.message}
        color={toast?.color}
        duration={2000}
        position="top"
        buttons={[{ icon: close, role: "cancel" }]}
        onDidDismiss={() => setToast(null)}
        positionAnchor={positionAnchor}
      />
   ...

The Reason Why I Use this Approach
Is because I try to called toast outside of DOM, for example like calling toast in /src/api file which were not in react DOM or ionic app (I forgot which one).

Issue resolve.