Search code examples
reactjsweb-frontend

Mounting React-Popup component throws render error


I'm trying to mount a react-popup component in the initial render of the page along with my actual app code (as recommended by the documentation) with the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import Popup from 'reactjs-popup';

ReactDOM.render(
    <div>
        <Popup />
        <App />
    </div>,
    document.getElementById('root')
);


class App extends React.Component {
    render() {
        return (
            <div className="main-outer">
                <div className= "main-middle">
                    <div className = "main-container">
                        <div className="row">
                            <div className = "large-12 columns">
                                <Canvas />
                            </div>
                        </div>
                   </div>
               </div>
            </div>
        );
    }
}

But I get this following error:

invariant.js:42 Uncaught Error: Popup.render(): A valid React element (or 
null) must be returned. You may have returned undefined, an array or some 
other invalid object.
at invariant (invariant.js:42)
at ReactCompositeComponentWrapper._renderValidatedComponent 
(ReactCompositeComponent.js:828)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:359)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
at Object.mountComponent (ReactReconciler.js:43)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
at Object.mountComponent (ReactReconciler.js:43)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)

And the page fails to render entirely. Any help is much appreciated.


Solution

  • I issue was that there are apparently two separate libraries reactjs-popup and react-popup, each recommended by two different helpful links. Here's hackernoon and the official docs. using reactjs-popup doesn't mount, but when I

    import Popup from react-popup
    

    it works.