Can't find variable: Xt (next js 13)

[abdulrahimiliasu]

After deploying to vercel with nextjs 13, the toast.promise returns
Error:

• name : Can't find variable: Xt
• type: Reference Error

I've tried with all versions of node i.e 16,18,20 & 22, it still throws this error. It happens only after deploying to Vercel, works fine on local dev environment.

[emilkowalski]

Please provide a codesandbox demo with reproduction.

[abdulrahimiliasu]

Please provide a codesandbox demo with reproduction.

I think it only happens with vercel, in the meantime I found a workaround with a delegate.

 promise: <T>(promise: Promise<T>, options: PromiseToastOptions<T>) => {
        const { success, loading, error } = options;
        const toastId = toast.loading(loading);
        return promise
            .then((data) => toast.success(success(data), { id: toastId }))
            .catch((e) => toast.error(error(e), { id: toastId }))
            .finally(options.finally);
    },

[emilkowalski]

Nice. Can you provide a demo of the deployment that errors on vercel?

[multivoltage]

@abdulrahimiliasu
I have site hosted on vercel with node 20 and next 14.
It works without errors

[tvone]

I also got this error when building with webpack

[tvone]

Please provide a codesandbox demo with reproduction.

I think it only happens with vercel, in the meantime I found a workaround with a delegate.

 promise: <T>(promise: Promise<T>, options: PromiseToastOptions<T>) => {
        const { success, loading, error } = options;
        const toastId = toast.loading(loading);
        return promise
            .then((data) => toast.success(success(data), { id: toastId }))
            .catch((e) => toast.error(error(e), { id: toastId }))
            .finally(options.finally);
    },

can you guide how to fix it?

[tvone]

Here's the fix for toast.promise for anyone experiencing the error:

Create a file toast_custom_promise.ts and use this code:

import { toast } from "sonner"; 

type PromiseToastOptions<ToastData = any> = {
  loading: string | React.ReactNode;  
  success: (data: ToastData) => React.ReactNode | string;  
  error: (e: Error) => React.ReactNode | string;
  finally?: () => void | Promise<void>;  
};

// Custom toast promise function
export const toast_custom_promise = (
  promise: Promise<any>,
  options: PromiseToastOptions<any>
) => {
  const { success, loading, error, finally: finalCallback } = options;

  const toastId = toast.loading(loading);

  // Handle promise result: success or error
  return promise
    .then((data) => {
 
      toast.success(success(data), { id: toastId });
    })
    .catch((e: Error) => {

      toast.error(error(e), { id: toastId });
    })
    .finally(() => {
    
      if (finalCallback) {
        finalCallback();
      }
    });
};

[abdulrahimiliasu]

@abdulrahimiliasu I have site hosted on vercel with node 20 and next 14. It works without errors

This issue is with next 13 as stated in the title above