Cannot set properties of undefined (setting 'toggle')

[NwosaEmeka]

bug

What is the current behavior?
I recently upgraded to React 18 and react-toastify 10.0.5, since then, I keep getting this error Cannot set properties of undefined (setting 'toggle') any pointers on how to resolve this? attached is screenshot of the issue

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React: 18.2.0
react-toastify: "^10.0.5"

browswer: Safari 17.4.1

[m-nathani]

We are facing the issue as well... would be nice if there is some insights on this.. and possible way to fix it please 🙏🏼

[pradeepgudipati]

I get the same error now randomnly !

And here is the console log for the -- error

redirect-boundary.js:57 Uncaught TypeError: Cannot set properties of undefined (setting 'toggle')
at Object.setToggle (page.js:3109:45)
at N (page.js:3179:32)
at R (page.js:3401:101)
at renderWithHooks (react-dom.development.js:11121:18)
at updateFunctionComponent (react-dom.development.js:16290:20)
at beginWork$1 (react-dom.development.js:18472:16)
at beginWork (react-dom.development.js:26927:14)
at performUnitOfWork (react-dom.development.js:25748:12)
at workLoopSync (react-dom.development.js:25464:5)
at renderRootSync (react-dom.development.js:25419:7)
at recoverFromConcurrentError (react-dom.development.js:24597:20)
at performSyncWorkOnRoot (react-dom.development.js:24899:20)
at flushSyncWorkAcrossRoots_impl (react-dom.development.js:7758:13)
at flushSyncWorkOnAllRoots (react-dom.development.js:7718:3)
at processRootScheduleInMicrotask (react-dom.development.js:7863:3)
at eval (react-dom.development.js:8034:7)

[pradeepgudipati]

my specific sample code is below

page.tsx code

const notifyNoActivity = () => toast.info("Sample Message here ", {
         position: "top-right",
         autoClose: 5000,
         hideProgressBar: false,
         closeOnClick: true,
         pauseOnHover: true,
         draggable: true,
         progress: undefined,
         theme: "light",
         transition: Bounce,
     });
     
       useEffect(() => {
        if (showTimeOutMessage) {
            notifyNoActivity();
        }
    }, [showTimeOutMessage]);

     const pushTimeoutMessage = () => {
         setShowTimeOutMessage(true);
     };
 
     const {start, stop, reset, isActive} = useTimer(pushTimeoutMessage, 5);

useTimer.ts file

import {useEffect, useRef, useState} from "react";
 
 const useTimer = (callback: () => void, delayInSeconds: number) => {
     const [isActive, setIsActive] = useState(false);
     const timerId = useRef<NodeJS.Timeout | null>(null);
 
     useEffect(() => {
         if (isActive) {
             timerId.current = setTimeout(() => {
                 callback();
                 setIsActive(prev => false);
             }, delayInSeconds * 1000);
         }
 
         return () => {
             if (timerId.current) {
                 clearTimeout(timerId.current);
             }
         };
     }, [isActive, delayInSeconds, callback]);
 
     const start = () => {
         setIsActive(prev => true);
     };
 
     const stop = () => {
         if (timerId.current) {
             clearTimeout(timerId.current);
         }
         setIsActive(prev => false);
     };
 
     const reset = () => {
         stop();
         start();
     };
 
     return {start, stop, reset, isActive};
 };
 
 export default useTimer;

[amila-t-kumarasekara]

**pradeepgudipati ** commented Sep 4, 2024 •

What is the purpose of doing this progress: undefined ?

[pradeepgudipati]

@amila-t-kumarasekara

I have taken the sample code from the demo site and there it is undefined !

https://fkhadra.github.io/react-toastify/introduction/

[savanfami]

i have also faced this issue any suggestions...???

[pradeepgudipati]

@amila-t-kumarasekara would be great if you could also try and then get back with a suggestion instead of just replying here. BTW the removal of progress doesn't really make any difference! it still crashes !

[Hassan1ahmad]

i am also getting the same error. any suggestions...?

[nik-neg]

• you might have a double instantiation of <ToastContainer /> in your app
• after removing the second instantiation the problem is resolved for me

[m-nathani]

i am also getting the same error. any suggestions...?

We have different package declaring Toastify, and using this packages / lib in our apps... in this case how do we avoid this error, these packages works independently and in the app too...

[fkhadra]

Hey, I've released a new major version that should fix this issue as well, please read the release note before upgrading 🙏🏽