Uncaught Invariant Violation in React rendering component

Question

I moved my build system from webpack to gulp because I was tired of trying to debug webpack, and this error appeared when I got the gulp build system running and React loaded on the client side. None of my components will load as a result.

I get an uncaught invariant error from react when loading a simple component

react.js:19500 Warning: lookup(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

The code loading the component

var require = requirejs


require(['react','react-dom','socket-io','google-api','./components/Action'], function(React,ReactDOM,Action) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".  



    // hand control of the DOM over to react
    ReactDOM.render( <div><Action/></div>, document.getElementById('root')  )

});

The component itself

define(['react'],function(React){

    // this class renders an action item
    // It is a draggable class, but does not handle drags itself
    // STATELESS
    // PROPS
    // * rank - key for sorting order
    // * Content - Content of div
    // * data-id - unique ID for handling drag events
    return ( 
        class Action extends React.Component {

            render() {
                console.log('this is called')
                return (<div className = "action" draggable = "true" data-id = {this.props.dataId} >
                                <p className = "row">{this.props.rank}    </p><p className = "row">{this.props.content}</p>
                        </div>)

            }
        }
    )
})

Relevant part of the build system

// copy the new frontend files and refresh them
gulp.task('frontend', ['sass'], function(){


return gulp.src(patt.frontend, { base: patt.scriptsBase } )
    .pipe(plumber())
    .pipe(babel({
        presets: ['react','es2015']
    }))
    .pipe(gulp.dest('./dest/scripts/'))
    .pipe(livereload())
})

I set a breakpoint in the Action module at the console.log() statement, and this is never called, leading me to suspect the render method is never called.

I suspect this error is something to do with the way the class is defined, or the way I am returning it with requireJS.

Here is the repo with the code in context. Just cloning and running npm install; npm start npm install; npm start should reproduce this.

Answer 1

In here:

require(['react','react-dom','socket-io','google-api','./components/Action'], function(React,ReactDOM,Action) {

Action actually references socket-io , which is not a valid React element nor null.

The modules are being injected in the same order they are being defined.

You can change the order of you dependecies, or change your function signature to be: function(React, ReactDOM, socketIo, googleApi, Action)