Я переместил свою систему сборки с веб-пакета на 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
должны воспроизвести это.