React toast usage error

[RajeshCShettigar]

Do you want to request a feature or report a bug? bug What is the current behavior? i am getting this error when using react toastify.

Uncaught TypeError: Cannot set properties of undefined (setting 'toggle') at Object.setToggle (clsx.mjs:1:384) at N (clsx.mjs:1:384) at R (clsx.mjs:1:384) at renderWithHooks (react-dom.development.js:16305:18) at updateFunctionComponent (react-dom.development.js:19588:20) at beginWork (react-dom.development.js:21601:16) at beginWork$1 (react-dom.development.js:27426:14) at performUnitOfWork (react-dom.development.js:26557:12) at workLoopSync (react-dom.development.js:26466:5) at renderRootSync (react-dom.development.js:26434:7)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? I am using latest version of vite-react and tailwindCSS

[guduchango]

I had the same error, tried everything again on a new react page, and it worked. I think the mistake was that I added this in two different places.

import 'react-toastify/dist/ReactToastify.css';

I hope it helps, greetings.

[RajeshCShettigar]

I had the same error, tried everything again on a new react page, and it worked. I think the mistake was that I added this in two different places.

import 'react-toastify/dist/ReactToastify.css';

I hope it helps, greetings.

Thank you

[FleetAdmiralJakob]

I did not import this stuff twice. but still get the error

I use tailwindcss too together with next.js

[luc345]

Same Issue, but I haven't found a solution yet. Can someone help .. Thank you.

[hoseinseyedinejad]

I had the same issue and I found the solution here The solution in the link says about the ToastContainer's Id but I haven't used it and just added a toastId:

You need to add some id to your toasts and check whether another toast is active with that id or not before toasting. Why do we have multiple toasts with the same content? Well, it's another issue. But you can solve your current issue via toastId and isActive properties of toast as below:

update this: toast.error('Session expired - please sign in again.'); to this: if (!toast.isActive("expiredToken")) { toast.error('Session expired - please sign in again.', { toastId: "expiredToken" }); }

Hope this helps ;)

[itsAniketChavan]

One Possible solution - import { toast, ToastContainer } from 'react-toastify';

add 'ToastContainer ' in out component