Неотловленное нарушение инварианта в компоненте рендеринга React

Я переместил свою систему сборки с веб-пакета на gulp, потому что устал от попыток отлаживать веб-пакет, и эта ошибка появилась, когда я запустил систему сборки gulp и загрузил React на стороне клиента. В результате ни один из моих компонентов не загрузится.

Я получаю необработанную инвариантную ошибку от реакции при загрузке простого компонента

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.

Код загрузки компонента

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

});

Сам компонент

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

            }
        }
    )
})

Соответствующая часть системы сборки

// 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())
})

Я установил точку останова в модуле Action на операторе console.log(), и он никогда не вызывается, что заставляет меня подозревать, что метод render никогда не вызывается.

Я подозреваю, что эта ошибка связана с тем, как класс определен, или с тем, как я возвращаю его с помощью requireJS.

Вот репозиторий с кодом в контексте. Просто клонирование и запуск npm install; npm start должны воспроизвести это.


person nslvr    schedule 08.06.2016    source источник


Ответы (1)


Здесь:

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

Action на самом деле ссылается на socket-io, который не является допустимым элементом React и не имеет значения null.

Модули внедряются в том же порядке, в котором они были определены.

Вы можете изменить порядок ваших зависимостей или изменить сигнатуру вашей функции на: function(React, ReactDOM, socketIo, googleApi, Action)

person Gilad Artzi    schedule 08.06.2016