Cannot render a toast in useEffect which is used to catch queryParams changes

[4Furki4]

Describe the feature / bug 📝:

I'm trying to render a sonner toast to show a message when a query parameter changes, specifically watching next-auth errors that are being set to query param like ?error='CredentialsSignin'. I was able to render toast messages using react-toastify with the same code.

Steps to reproduce the bug 🔁:

Here's the code I'm running:

useEffect(() => {
    if (params.get("error") === "CredentialsSignin") {
      toast.error(InvalidUsernameEmailOrPasswordIntl, {
        position: "bottom-center",
      });
      router.replace({
        pathname: "/signin",
        query: {
          callbackUrl: params.get("callbackUrl"),
        },
      });
    }
  }, [params.get("error")]);

1. You can test it using other query params like test=test and refreshing the page with the query params.

[volfadar]

i have the same issue, have you figured out the solution?

[volfadar]

nvm, already solved, turns out need to use setTimeout as the docs say https://sonner.emilkowal.ski/toast#render-toast-on-page-load

[4Furki4]

nvm, already solved, turns out need to use setTimeout as the docs say https://sonner.emilkowal.ski/toast#render-toast-on-page-load

yes it seems we have to use toaster in a setTimeout. Thanks for letting me know