Uncaught TypeError: Cannot read properties of undefined (reading 'content')

[nik32]

Do you want to request a feature or report a bug?
bug report

What is the current behavior?
So is complicated to explain as this might be specific to my project, But I will try!! In our product - we are having a modal on top of modal. Both of these modals are having their own ToastContainer [with multiContainer enabled and containerId provided to both - so that toast produced in one modal is not shown in the other one]. Now If after closing a toast - I 'very quickly' close the modal, I am getting the below error -

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:
Steps to reproduce are given above. It will be time consuming to give the demo at the moment. But let me know if you are not able to reproduce the error with the above steps or if you really want the demo - I will try and provide a CodeSandbox.

What is the expected behavior?
The error should not occur coz it then stoped any other toasts to be displayed on the page till we refresh the page. NOTE - the first time I tested, other toasts were not being shown after the error. But in sub-sequest testing I have found that other toasts are not being stopped from displaying.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 18 [with TS and NextJS]. I have tested on 2 browser - a. Microsoft edge on MacOS and b. safari. On both I have been able to to reproduce it with the steps told above. As edge is chromium based - i think this should also happen with chrome, don't know about firefox. On safari the following was the error [this might give you more context about this bug] -

[erikbg7]

Looks like a bug caused by unmounting the ToastContainer with the Toast before removing it correctly.

The main issue is that we expect the toast to exist but it does not:

react-toastify/src/hooks/useToastContainer.ts

Line 191 in b53938a

const removed = toToastItem(toastToRender.get(toastId)!, 'removed');

So it breaks when we try to access it:

react-toastify/src/utils/mapper.ts

Line 5 in b53938a

content: toast.content,

Could be easily solved if it is considered a bug, but you could probably fix it just by moving the ToastContainers out of the Modals.

[nik32]

Hey @erikbg7, thanks for taking time to look into this issue!!

Could be easily solved if it is considered a bug, but you could probably fix it just by moving the ToastContainers out of the Modals.

That is actually a bit problematic in my case - as I have my own custom modal. If I move the ToastContainers out of my modals - the toast comes behind the backdrop of modal. Thus not allowing the user to close the toast or see the toast properly.

[nettum]

I can also confirm that I run into this, probably when using React.useRef() and toast.dismiss.
I only have one ToastContainer in a layout wrapper component and the toast itself is fired from inside a <Portal>-component from react-portal. Have not done enough testing yet to figure out the root cause and get this error consistent.

Example:

const toastId = React.useRef<Id | null>(null);

toastId.current = toast("some text" { isLoading: true });

if (someCondition) {
  toast.update(toastId.current, { ... });
} else {
  toast.dismiss(toastId.current);
}

Ubuntu 22.04.1 LTS
Google Chrome 106.0.5249.103
react-toastify 9.0.8
react 17.0.2

[nik32]

For me, in the modal situation, the root cause most likely is the "closing of modal too quickly", after dismissing the toast [or in simpler terms - when the time b/w closing of the modal and toast is very less]. I was able to produce this error every time doing so.

[nettum]

Thanks for the info @nik32! For the record, I was now also able to get the same error somewhere else in the app without any modal context, so there might be something else going on with mouting / unmounting and "quick navigation".

[nettum]

I had the ToastContainer in a layout component that sometimes had to do re-renders. Will move it further out to see if the problem disappears.

[nik32]

@erikbg7 any update on this?

[baxgas]

Same problem here, using the ToastContainer in a refine + next.js app, have to put it in a layout, so it can handle globally the toast messages.

[nettum]

FWIW this was solved for me after putting the ToastContainer inside the _app.tsx instead of our own layout file. Not gotten any errors after that change.

[baxgas]

Thanks, @nettum I tried it, put it outside the <Refine> wrapper but still have the same issue :-(
The strange thing is that it works fine with some pages, eg. create resource works, but edit resource gives this Unvaught TypeError, albeit they use the same React component, with this onSubmit trigger

    const onSubmit = async (formData: any) => {
        const data = onFinish(formData)
        data.then((res) => {
            if (res) {
                toast(`${res?.data?.name} succesfully ${isEdit ? 'edited' : 'created'}`, {
                    type: 'success',
                })
            } else {
                toast('Something went wrong', {
                    type: 'error',
                })
            }
        })
    }

[baxgas]

I found a workaround for it, to wrap it in setTimeout, with some minimal (eg. 100) value

[envoy1084]

I was having the same error
TypeError: Cannot read properties of undefined (reading 'content')

I resolved it by adding a small delay in the notification appearance

eg-

const sendTransaction = () => {
    toast.promise(
      writeAsync,
      {
        pending: "Promise is pending",
        success: "Promise resolved 👌",
        error: "Promise rejected 🤯",
      },
      {
        position: toast.POSITION.BOTTOM_LEFT,
        delay: 100,
      }
    );
  };

[igor17400]

Any solution on this?
I'm facing the same problem

[envoy1084]

I was having the same error TypeError: Cannot read properties of undefined (reading 'content')

I resolved it by adding a small delay in the notification appearance

eg-

const sendTransaction = () => {
    toast.promise(
      writeAsync,
      {
        pending: "Promise is pending",
        success: "Promise resolved 👌",
        error: "Promise rejected 🤯",
      },
      {
        position: toast.POSITION.BOTTOM_LEFT,
        delay: 100,
      }
    );
  };

@igor17400 did you try this?

[berci-i]

I also have this problem, and the main issue is that it doesn't give me a traceback (so I am not sure where in the code this occurred ).

I think at the very least rect-toastify should provide the traceback to let you know what caused the issue.

Thank you!