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 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 }
  );