Error: <SHOW_TOAST> Event is not registered.

Edit: Scroll to Actual Error

Hello, I’ve tried my best to follow the directions on the readme, but I’m not getting the expected output. Anything helps, I’m new to react and whatnot so please go easy on me if I did something stupid. Here’s my code, and an example of what I’m getting instead:

import React, {Component} from 'react';
import {ToastContainer, toast} from 'react-toastify';
import {Switch, Route, Redirect} from 'react-router-dom';
import {Container} from 'reactstrap';
import Header from '../../components/Header/Header';
import Sidebar from '../../components/Sidebar/Sidebar';
import Dashboard from '../../views/Dashboard/Dashboard';

// Pages
import Monitor from '../../views/Monitor/Monitor';
import SimpleLineIcons from '../../views/Icons/SimpleLineIcons/SimpleLineIcons';

class Full extends Component {
  constructor(props) {
    super(props);

    Full.notify = Full.notify.bind(this);
    Full.error = Full.error.bind(this);
    Full.success = Full.success.bind(this);
  }

  static notify() {
    return toast('Hello World!', {position: "top-center"});
  }

  static error() {
    return toast.error('Danger!');
  }

  static success() {
    return toast.success('Success...');
  }

  render() {

    return (
      <div>
        <button onClick={Full.error}>WEfF</button>
        <ToastContainer autoClose={5000}/>
        <div className="app">
          <Header/>
          <div className="app-body">
            <Sidebar {...this.props}/>
            <main className="main">
              <Container fluid>
                <Switch>
                  <Route path="/dashboard" name="Dashboard" component={Dashboard}/>
                  <Route path="/monitor" name="Buttons" component={Monitor}/>
                  <Route path="/settings" name="Buttons" component={Monitor}/>
                  <Route path="/profile" name="Buttons" component={Monitor}/>
                  <Route path="/icons/simple-line-icons" name="Simple Line Icons" component={SimpleLineIcons}/>
                  <Redirect from="/" to="/dashboard"/>
                </Switch>
              </Container>
            </main>
          </div>
        </div>
      </div>
    );
  }
}

export default Full;

[ProductOfAmerica]

Good news, I found the solution to this problem. It occurs if you have two instances of ToastContainer in your project. I accidentally left one in a different component. I think what was happening was the two were conflicting, and one of the components containing the ToastContainer would dismount, causing the toast.whatever() calls to toast to the missing component.

Now we know! 😄

[ProductOfAmerica]

@jeffersoneagley just saying…it was literally in the first code example:

Also, start a new issue.