Uncaught TypeError: Cannot read property 'ToastContainer' of undefined

[alirezastack]

The version of react-toastr is 2.9.5. And as your own documentations I have used in my react component named Landing as below:

import React from 'react';

import SignupForm from "../components/SignupForm";
import signup_store from '../stores/SignupStore';
import ReactToastr from "react-toastr";


const {ToastContainer} = ReactToastr; // This is a React Element.
const ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.animation);


export default class Landing extends React.Component {
    constructor() {
        super();
        this.state = {
            username: '',
            email: '',
            full_name: '',
            password: '',
        }
    }

    addAlert () {
        this.container.success(
            "my-title",
            "my-fascinating-toast-message", {
                timeOut: 5000,
                extendedTimeOut: 3000
            });
    }

    componentWillMount() {
        signup_store.on("change", () => {
            console.log('component will mount (landing)...');
            console.log('get user from signupStore: ', signup_store.getUser());
            this.setState(signup_store.getUser())
        })
    }

    render() {
        return (
            <div>
                <h1>Welcome</h1>
                <ToastContainer ref={(input) => {this.container = input;}}
                                toastMessageFactory={ToastMessageFactory}
                                className="toast-top-right"
                                preventDuplicates="true" />
                <button onClick={this.addAlert}>Add Toast</button>
                <SignupForm/>
            </div>
        )
    }
}

The code above produce the below error:

Uncaught TypeError: Cannot read property 'ToastContainer' of undefined
    at Object.defineProperty.value (index_bundle.js:36686)
    at __webpack_require__ (index_bundle.js:20)
    at Object.defineProperty.value (index_bundle.js:13074)
    at __webpack_require__ (index_bundle.js:20)
    at Object.<anonymous> (index_bundle.js:7450)
    at __webpack_require__ (index_bundle.js:20)
    at module.exports (index_bundle.js:63)
    at index_bundle.js:66

[whns]

The docs use require instead of import, which is your issue here.

Try this instead:
import { ToastContainer,
ToastMessage,
} from "react-toastr";
const ToastMessageFactory = React.createFactory(ToastMessage.animation);

[alirezastack]

Thank you for the response. I also had to change preventDuplicates="true" to preventDuplicates={true} in order to bypass another error that tried to read boolean but got string.

And now I was again unable to get the desired result, I get the below error:

Uncaught TypeError: Cannot read property 'container' of undefined
    at addAlert (index_bundle.js:36706)
    at HTMLUnknownElement.callCallback (index_bundle.js:20504)
    at Object.invokeGuardedCallbackDev (index_bundle.js:20543)
    at Object.invokeGuardedCallback (index_bundle.js:20400)
    at Object.invokeGuardedCallbackAndCatchFirstError (index_bundle.js:20414)
    at executeDispatch (index_bundle.js:20637)
    at Object.executeDispatchesInOrder (index_bundle.js:20659)
    at executeDispatchesAndRelease (index_bundle.js:21174)
    at executeDispatchesAndReleaseTopLevel (index_bundle.js:21185)
    at Array.forEach (<anonymous>)

[whns]

Yeah, the example definitely has some issues - needs to be updated. On ToastContainer, replace ref={(input) => {this.container = input;}} with ref="container", and in addAlert(), use this.refs.container instead of this.container.

The demo site is using this implementation: https://github.com/tomchentw/react-toastr/blob/master/src/app/App.js