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 83988f1

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:

react-toastify/src/core/containerObserver.ts

Line 224 in 83988f1

setToggle: (id: Id, fn: (v: boolean) => void) =>

[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 <#1051 (comment)>, 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 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.

[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 <#1051 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXAMNWYKMKD3P7I35LJ2A7LZC5QE7AVCNFSM6AAAAABCG6IJIWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJYHA2DANBZHE> . You are receiving this because you commented.Message ID: ***@***.***>

[luc345]

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')'.

[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 <#1051 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXGHXTCWIBTYTMVZJULU5BDZF27K5AVCNFSM6AAAAABCG6IJIWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBZGEYTONRVGY> . You are receiving this because you commented.Message ID: ***@***.***>