An empty toast is rendered

[SaNFeeDep]

An error occurs spontaneously during a toast call. The toast is rendered in the DOM tree but does not appear on the screen. The toast has content.

The <Toaster/> component is present in the App.tsx file. The call is felt through toast.success(). Below is a screenshot of what is happening:

Here is the app.tsx itself:

[selenecodes]

Running into this issue as well. For me, it only occurs when a user spams the action that summons the toast. (say 3-5+ summon actions).

Also if you're using a react server component adding a check to see if the component is mounted seems to solve it.

'use client'
// imports here

export function Toaster(props: ToasterProps) {
  const mounted = useMounted()
  if (!mounted) return null
  return <HotToaster {...props} />
}

import * as React from 'react'

export function useMounted() {
  const [mounted, setMounted] = React.useState(false)

  React.useEffect(() => {
    setMounted(true)
  }, [])

  return mounted
}

[joepetrillo]

Also having this issue, I am using a custom toast and using the Headless UI <Transition/> component.

const showSuccessToast = () =>
  toast.custom(
    (t) => (
      <Transition
        appear={true}
        as={Fragment}
        show={t.visible}
        enter="transform ease-out duration-300 transition"
        enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
        enterTo="translate-y-0 opacity-100 sm:translate-x-0"
        leave="transition ease-in duration-100"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black/5">
          <div className="p-4">
            <div className="flex items-center">
              <div className="shrink-0">
                <CheckCircleIcon
                  className="h-8 w-8 text-indigo-600"
                  aria-hidden="true"
                />
              </div>
              <div className="ml-3 w-0 flex-1 pt-0.5">
                <p className="text-sm font-medium text-gray-900">
                  Successfully updated role
                </p>
              </div>
            </div>
          </div>
        </div>
      </Transition>
    ),
    { position: "bottom-right", duration: 2500 }
  );