React-toastify: Uncaught Error: The element you provided cannot be rendered.

Created on 15 Mar 2018  路  5Comments  路  Source: fkhadra/react-toastify

Hi,

I'm having this error after one toast has been shown:

ToastContainer.js:201 Uncaught Error: The element you provided cannot be rendered. You provided an element of type undefined
    at ToastContainer.show (ToastContainer.js:201)
    at Object.<anonymous> (ToastContainer.js:140)
    at EventManager.js:39

In App.js I do this:

componentWillReceiveProps(nextProps) {
    if (nextProps.errorMessage !== '') toast.error(nextProps.errorMessage);
  }

and the render:

render() {
    const { isAuthenticated } = this.props;

    return (
      <Fragment>
        <ToastContainer position="bottom-right" />
        <Geolocation />
        <App isAuthenticated={isAuthenticated} />
      </Fragment>
    );
  }

Thanks

question

All 5 comments

Hello @albert-olive,

The issue is coming from here I guess:

componentWillReceiveProps(nextProps) {
    if (nextProps.errorMessage !== '') toast.error(nextProps.errorMessage);
}

It looks like nextProps.errorMessage is undefined. Could you check it?

Hi, thank you for the response. No, it's always a text. Don't know why I'm having this error. I have checked all the documentation and seems correct

Hmm strange. The test that fail is the following:

React.isValidElement(content) ||
      typeof content === 'string' ||
      typeof content === 'number' ||
      this.isFunction(content)

To be sure could you do:

componentWillReceiveProps(nextProps) {
    console.log(nextProps.errorMessage);
    if (nextProps.errorMessage !== '') toast.error(nextProps.errorMessage);
}

Just to be sure that nothing strange happend on your side.

Ok, yes I have checked properly If error is undefined. I had a weir case that happens. So I close the issue. Thanks for your support

I'm getting the same error when ToastContainer is constructed. None of my other code is calling toast.show, but it appears that the show method is being called when the listener for the ACTION.SHOW event is being created. See screenshot. (content is undefined).

react-toastify screenshot

The app is running in createReactApp development server, not ejected, with react v.16.5.0, react-scripts v.1.1.5

Was this page helpful?
0 / 5 - 0 ratings