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?

Patrickpatrilateral

it could be version conflict like you say. useReducer (which triggers the error) is a react hook, and at 16.4 hooks are not released yet – Ballplayer

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 [email protected] or the version mentioned in the course. (This worked for me)

Thickwitted

I ended up downgraded as you suggested i.e. npm -i [email protected] instead of using the very latest version and all is working as expected. – Patrickpatrilateral

npm install --save [email protected] helps me, 5, 6, 7 versions don't work – Ricercar

Somehow for me deleting node_modules/ and package-lock.json (or whatever lock file), then npm install again to reinstall everything from scratched worked for me – Epexegesis

Answer 2

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

Elongation

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>
    )

Thoraco

I'll try this later but I feel what you're suggesting doesn't make sense. Why would I want to pass my "post" object to the toast if all I want to display is a message when an action is taking place i.e. deleted, added, etc... for example. And not passing my "post" object at all the function would simply not be a solution as I need to manipulate the object within the function itself i.e. post it to a web service for example – Patrickpatrilateral

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.

Iambus