reactjsreact-toastify

TypeError: Object(...) is not a function when using react-toastify

I'm trying to get react-toastify to work in an app I'm writing while following an online course. I'm supposed to install a specific version but I always prefer using the very latest one but when I do, I'm getting a bunch of errors.

I've gone to the npm home page for React-Toastify and they provide very good documentation on how to use it and I believe I've followed the instructions from both the course and react-toastify correctly but I'm still getting an error.

I've defined react-toastify as the top of my App.js

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

and I'm simply calling a test toast as follows:

handleDelete = (post) => {
    toast("deleted");
    // toast.error("deleted");       
}

and in my render method I have the <ToastContainer />:

render() {
    return (
       <React.Fragment>
       <ToastContainer />
       <button className="btn btn-error" onClick={this.handleDelete}>
          Delete
       </button>

When I click on my delete button I get an error (well I'm actually getting a bunch of them but this is the main one):

TypeError: Object(...) is not a function
useToastContainer
..myapp/node_modules/react-toastify/dist/react-toastify.esm.js:866
  863 | }
  864 | 
  865 | function useToastContainer(props) {
> 866 |   var _useReducer = useReducer(function (x) {
  867 |     return x + 1;
  868 |   }, 0),
  869 |       forceUpdate = _useReducer[1];

Actually, I've just noticed that my <ToastContainer /> was commented out in my render method and the second I uncomment it, the same error occurs immediately as my page loads.

Am I missing something or is this a bug with react-notify and the version of React I'm using i.e. 16.4.1?

Solution

  • I was also facing a similar issue, this is because there are some conflicting dependencies with react-toastify in the newer versions with respect to its predecessor.

    Also if you follow some courses they usually provide some resources to proceed with, when you start working on those resource and do a npm i for its dependencies it install certain versions of the package which is specified in the package.json file, so if you are trying to install a new package as a part of the course it might not be compatible with the ones mentioned in the resource files.

    OR