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

Question

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?

Answer 1

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

OR

• Try reverting the version of react-toastify to earlier version , maybe try with react-toastify@4.1 or the version mentioned in the course. (This worked for me)

Answer 2

install an older version of react-toastify and it will work just fine

Answer 3

Remove unused props.

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

Or use the function props.

handleDelete = (post) => {
    toast(post);
}

And call your function in arrow function.

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

Answer 4

What works for me was to create another file to hold the <ToastContainer/> and then import it in my App.js and it works fine. Here I'm giving you a simple example:

./src/toast.jsx

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

const Toast = () => {
  const errorMessage = () => {
    toast.error("Unexpected error occured");
  };
  return (
    <div>
      <button onClick={errorMessage} className="btn btn-primary">
        Submit
      </button>
      <ToastContainer />
    </div>
  );
};

export default Toast;

./src/App.js

import React, { Component } from "react";
import "./App.css";
import Toast from "./toast";

class App extends Component {
  state = {
  };

  render() {
    return (
      <React.Fragment>
        //Your code...
        <Toast />
      </React.Fragment>
    );
  }
}

export default App;

However, my application is a little bit more complex and basically I have a file httpServices.js, where I'm using Axios library to make HTTP requests and catch errors. So if I catch an error while sending an Http request and I'm using "toast.error("Message")". I'm using the new file toast.jsx to hold a container for the errors and this container I import in my App.js.