Cannot set properties of undefined (setting 'toggle')

[greeeg]

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

What is the current behavior? Hi 👋, I'm getting new Sentry issues on my project since migrating from 10.0.1 to 10.0.3:

TypeError Object.setToggle
Cannot set properties of undefined (setting 'toggle')

I suspect the changes were introduced in https://github.com/fkhadra/react-toastify/commit/83988f1e868877dfe5b3151af2be5a573042f054

Sorry I don't have more context since the stack trace does not include which line of your package throws the type error

[fkhadra]

I'll try to reproduce the issue locally. More info that you could besides the error? Thank you

[greeeg]

@fkhadra Not much since the code is minified in prod & I cannot reproduce it either locally, I only got:

TypeError: undefined is not an object (evaluating 'l.get(p).toggle=E')

I suspect it's coming from this exact line: https://github.com/fkhadra/react-toastify/blob/83988f1e868877dfe5b3151af2be5a573042f054/src/core/containerObserver.ts#L224

[isalex78]

I get this error or attempt to have multiple toasts with different ids. Like push toast with id1, while it's still active - push another with id2 and again toast with id1. The last toast is not closing and the error thrown.

[Alfredoeb9]

I had the similar issue looks like adding a containerId to your ToastContainer fixed the issue for me, and you can do a little overkill and check if that certain toastId for given ToastContainer ContainerId is active or not .

ex.

if (!toast.isActive(13, "friendRequest")) {
            console.log("first time running")
            toast('User does not exist', {
                position: "bottom-right",
                autoClose: false,
                closeOnClick: true,
                draggable: false,
                type: "error",
                toastId: 13                      
            })
 }

<ToastContainer containerId={"friendRequest"} />

[Pranay-Pandey]

Seems like the issue is because more than one ToastContainer are in the current reference. Fixed it by only having one ToastContainer in a parent component - Toast are created from many children components, but because all of them have only one instance of ToastContainer available, there is no issue.

The other method is to specify containerId for specific part where ToastContainer is present, I think

[arpitt45]

So, when you're using React Toastify, sometimes you might encounter this error that says something about having more than one ToastContainer. Basically, ToastContainer is like a box where all your toast notifications pop up on the screen. If you have more than one of these boxes showing up in your app, things can get a bit confused.

But no worries, there are two ways to fix it:

1.Just Stick to One Box (ToastContainer): The easiest way is to make sure you only have one ToastContainer in your whole app. You can think of it like having one central spot for all your toast messages to show up. Even if different parts of your app want to show a toast, they'll all use this same box, so there's no confusion.

Example: Imagine you have a big container for your whole app, and you just put the ToastContainer inside it. So no matter where a toast comes from, it always goes into that one container.

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
    return (
        <div>
            {/* Other components */}
            <div>
                {/* Component A */}
                <ToastContainer containerId="containerA" />
            </div>
            <div>
                {/* Component B */}
                <ToastContainer containerId="containerB" />
            </div>
        </div>
    );
}

export default App;

2.Give Each Part of Your App Its Own Box (ToastContainer): Now, if for some reason, you really need different parts of your app to have their own separate toast boxes, you can do that too. But you have to be smart about it. You give each box a unique "ID" using something called a "containerId". This way, even if there are multiple boxes, they each have their own identity, so they won't get mixed up.

Example: Let's say you have two sections in your app, and you want each section to have its own toast box. You'd create a ToastContainer for each section and give them different IDs, so they stay separate and organized.

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function SectionA() {
    const notify = () => toast.info("Toast from Section A");
    
    return (
        <div>
            <button onClick={notify}>Show Toast in Section A</button>
            <ToastContainer containerId="containerA" />
        </div>
    );
}

function SectionB() {
    const notify = () => toast.info("Toast from Section B");
    
    return (
        <div>
            <button onClick={notify}>Show Toast in Section B</button>
            <ToastContainer containerId="containerB" />
        </div>
    );
}

function App() {
    return (
        <div>
            <SectionA />
            <SectionB />
        </div>
    );
}

export default App;

[SunZhiC]

Seems like the issue is because more than one ToastContainer are in the current reference. Fixed it by only having one ToastContainer in a parent component - Toast are created from many children components, but because all of them have only one instance of ToastContainer available, there is no issue.

The other method is to specify containerId for specific part where ToastContainer is present, I think

It works, having one ToastContainer in a parent component.

[medAzizRezgui]

Adding limit={1} to the <ToastContainer/> fixed it for me.

[kathanshah1206]

So, when you're using React Toastify, sometimes you might encounter this error that says something about having more than one ToastContainer. Basically, ToastContainer is like a box where all your toast notifications pop up on the screen. If you have more than one of these boxes showing up in your app, things can get a bit confused.

But no worries, there are two ways to fix it:

1.Just Stick to One Box (ToastContainer): The easiest way is to make sure you only have one ToastContainer in your whole app. You can think of it like having one central spot for all your toast messages to show up. Even if different parts of your app want to show a toast, they'll all use this same box, so there's no confusion.

Example: Imagine you have a big container for your whole app, and you just put the ToastContainer inside it. So no matter where a toast comes from, it always goes into that one container.

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
    return (
        <div>
            {/* Other components */}
            <div>
                {/* Component A */}
                <ToastContainer containerId="containerA" />
            </div>
            <div>
                {/* Component B */}
                <ToastContainer containerId="containerB" />
            </div>
        </div>
    );
}

export default App;

2.Give Each Part of Your App Its Own Box (ToastContainer): Now, if for some reason, you really need different parts of your app to have their own separate toast boxes, you can do that too. But you have to be smart about it. You give each box a unique "ID" using something called a "containerId". This way, even if there are multiple boxes, they each have their own identity, so they won't get mixed up.

Example: Let's say you have two sections in your app, and you want each section to have its own toast box. You'd create a ToastContainer for each section and give them different IDs, so they stay separate and organized.

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function SectionA() {
    const notify = () => toast.info("Toast from Section A");
    
    return (
        <div>
            <button onClick={notify}>Show Toast in Section A</button>
            <ToastContainer containerId="containerA" />
        </div>
    );
}

function SectionB() {
    const notify = () => toast.info("Toast from Section B");
    
    return (
        <div>
            <button onClick={notify}>Show Toast in Section B</button>
            <ToastContainer containerId="containerB" />
        </div>
    );
}

function App() {
    return (
        <div>
            <SectionA />
            <SectionB />
        </div>
    );
}

export default App;

not at all correct

[wasiflatifhussain]

import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css';

You can simply only add one ToastContainer in your App.js and comment out or remove individual ToastContainers declared in each js file. Having many ToastContainers is causing the issue;

Simply having one ToastContainer in the App.js solved the issue through the web-app for me.

[kathanshah1206]

thank you..It worked indeed !!😄

On Thu, May 2, 2024 at 5:13 PM HUSSAIN Wasif Latif @.***> wrote:

import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css';

You can simply only add one ToastContainer in your App.js and comment out or remove individual ToastContainers declared in each js file. Having many ToastContainers is causing the issue;

Simply having one ToastContainer in the App.js solved the issue through the web-app for me.

— Reply to this email directly, view it on GitHub https://github.com/fkhadra/react-toastify/issues/1051#issuecomment-2090294789, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXGHXTAPHOCEJL374HFGJ2TZAIREJAVCNFSM6AAAAABCG6IJIWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJQGI4TINZYHE . You are receiving this because you commented.Message ID: @.***>

[Stephenson30]

thank you worked for me

[ani1609]

This error comes when you try to render more than one <ToastContainer /> in a single layout. Like in my case, i was having a next app and i was trying to render this in many components which ended up with the above error. Instead, what you can do is, just move the <ToastContainer /> to the parent renderer like layout.tsx in my case. This will resolve the issue.

[Stephenson30]

Thank you

On Sat, May 18, 2024, 3:25 PM Ankit Kr Chowdhury @.***> wrote:

This error comes when you try to render more than one in a single layout. Like in my case, i was having a next app and i was trying to render this in many components which ended up with the above error. Instead, what you can do is, just move the to the parent renderer like layout.tsx in my case. This will resolve the issue.

— Reply to this email directly, view it on GitHub https://github.com/fkhadra/react-toastify/issues/1051#issuecomment-2118840499, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXAMNWYKMKD3P7I35LJ2A7LZC5QE7AVCNFSM6AAAAABCG6IJIWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJYHA2DANBZHE . You are receiving this because you commented.Message ID: @.***>

[kathanshah1206]

dont know exactly for Next.js code base, but did u try making the use of setPropogation() or preventDefault()?..well in React js ..there is no issue

On Wed, Jun 5, 2024 at 1:20 PM Lucas @.***> wrote:

After updating react-toastify to version 10.0.5 in the same Next.js codebase, I encountered the same issue. The toast appears successfully at first but cannot be closed, and then it crashes with the error 'TypeError: Cannot set properties of undefined (setting 'toggle')'.

— Reply to this email directly, view it on GitHub https://github.com/fkhadra/react-toastify/issues/1051#issuecomment-2149117656, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXGHXTCWIBTYTMVZJULU5BDZF27K5AVCNFSM6AAAAABCG6IJIWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBZGEYTONRVGY . You are receiving this because you commented.Message ID: @.***>

[hoapooh]

I figure the error myself, it is all because you have more than one ToastContainer in only one page, let's take an simple example here. When using React, in my PRODUCT page, i have my HEADER, CONTENT and FOOTER, i already have my ToastContainer at the HEADER component so that i don't need any ToastContainer at the CONTENT and FOOTER anymore, so check it out and delete those are not necessary

[kathanshah1206]

Thanks, I'll check it out.

On Mon, Jul 8, 2024 at 8:13 PM hoapooh @.***> wrote:

I figure the error myself, it is all because you have more than one ToastContainer in only one page, let's take an simple example here. When using React, in my PRODUCT page, i have my HEADER, CONTENT and FOOTER, i already have my ToastContainer at the HEADER component so that i don't need any ToastContainer at the CONTENT and FOOTER anymore, so check it out and delete those are not necessary

— Reply to this email directly, view it on GitHub https://github.com/fkhadra/react-toastify/issues/1051#issuecomment-2214283163, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXGHXTDBE4U6GEMLPTMOKTLZLKQRXAVCNFSM6AAAAABCG6IJIWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMJUGI4DGMJWGM . You are receiving this because you commented.Message ID: @.***>

[maazu]

I was encountering this issue, I was able to resolve it by adding the ToastContainer in the global layout file

 <ToastContainer
            style={{ fontSize: '16px', marginTop: 65 }}
            position="top-center"
            autoClose={1000}
            closeOnClick
            pauseOnHover
            containerId="GlobalApplicationToast"
          />

and then called in other components in the following way.

 toast.success(`Success: User has been deleted successfully.`, {
        toastId: uniqueId('toast-sucess'),
        containerId: 'GlobalApplicationToast',
      });

[EP-PCOM]

Solution for react-toastify

Create a singular toast container in App.js and simply import import { toast } from 'react-toastify'; in any subsequent file you intend to call toasts from. Then call normally toast.success('Working now')

Creating multiple toast containers within your app isn't best practice and should be avoided anyway.

[lightify97]

Experiencing the same issue. Tried everything and nothing works.

• Single Container
• Multiple Containers (each with it's own id) and giving every toast the containerId
• Sometimes I get this error and other times TypeError: v.get(...) is undefined

A little background about the environment. I'm using this in an online multiplayer game. The toasts are activated and dismissed based on socket events. Here's a little recording of the issue.

https://github.com/user-attachments/assets/a6ebefac-12d8-4e90-a566-870b4156dfe9

A little help will be highly appreciated. Thanks.