Uncaught Error: The element you provided cannot be rendered.

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

[charleskoehl]

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

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

[fkhadra]

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?