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.

So to avoid conflict here you can manually install all the packages mentioned in package.json with the latest versions then install the latest version of react-toastify

Try reverting the version of react-toastify to earlier version , maybe try with [email protected] or the version mentioned in the course. (This worked for me)