react_toastify__WEBPACK_IMPORTED_MODULE_1__.toast.configure is not a function

Question

I am trying to implement React Toastify for showing notifications in our application but its not working giving the error as "react_toastify__WEBPACK_IMPORTED_MODULE_1__.toast.configure is not a function"

I am using the latest version '10.0.4' of React-Toastify

I have tried below:

App.js

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

toast.configure();
function GeeksforGeeks() {
  const notify = () => {
  // inbuilt-notification
  toast.warning("Danger");
  // inbuilt-notification
  toast.success("successful");
  // inbuilt-notification
  toast.info("GeeksForGeeks");
  // inbuilt-notification
  toast.error("Runtime error");
  // default notification
  toast("Hello Geeks");
};

 return (
   <div className="GeeksforGeeks">
     <button onClick={notify}>Click Me!</button>
   </div>
  );
}

export default GeeksforGeeks;

Also can anyone please suggest a nice and easy library for showing notifications in the application?

My requirement is I need notification as below one with title, description and close icon when clicked notification should be closed. I have tried React-hot-toast but it seemed does not fit into my requirement.

Answer 1

As per the Moshe Fortgang's comment, toast.configure() method has been removed in React Toastify version 9. I have searched it again and found the fix. I have used the same library React-Toastify and fixed the issue. by the below code

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


function Example() {
  const notify = () => {
    toast("Default Notification !");

    toast.success("Success Notification !", {
      position: "top-center"
    });

    toast.error("Error Notification !", {
      position: "top-left"
    });

    toast.warn("Warning Notification !", {
      position: "bottom-left"
    });

    toast.info("Info Notification !", {
      position: "bottom-center"
    });

    toast("Custom Style Notification with css class!", {
      position: "bottom-right",
      className: 'foo-bar'
    });
  };

  return (
    <>
      <button onClick={notify}>Notify</button>;
      <ToastContainer transition={Slide} />
    </>
  );
}

export default Example;