fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.63k stars 697 forks source link

Uncaught Error: The element you provided cannot be rendered. #148

Closed albert-olive closed 6 years ago

albert-olive commented 6 years ago

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

fkhadra commented 6 years ago

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?

albert-olive commented 6 years ago

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

fkhadra commented 6 years ago

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.

albert-olive commented 6 years ago

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

charleskoehl commented 6 years ago

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