Подтвердить что ты не робот

Reactjs: Warning: React.createElement: тип не должен иметь значение null или undefined

это полная ошибка

Предупреждение: React.createElement: тип не должен иметь значение null или undefined. Он должен быть строкой (для элементов DOM) или ReactClass (для составных компонентов).

и это все, что у меня есть в этом представлении

import React, { Component } from 'react';
import Router, {Link, RouteHandler} from 'react-router';
import { Grid, Row, Column, List, ListItem } from '../../components/Layout';
import { RaisedButton, Paper } from 'material-ui';

const videosInformation = {
  time      : 25,
  gameId    : 15665,
  date      : '12 10 2015',
  gameName  : "Black Jack"
};

export default class Home extends Component {

  static contextTypes = {
    router  : React.PropTypes.func
  }  

  render () {
    return <Grid>                   
      <Row>
        <Column>
          <Paper>
            <List subheader="Player Info">
              <ListItem primaryText={`Name: ${videosInformation.time}`} />
              <ListItem primaryText={`Nickname: ${videosInformation.date}`} />
              <ListItem primaryText={`Age: ${videosInformation.gameId}`} />
              <ListItem primaryText={`Language: ${videosInformation.gameName}`} />
            </List>
          </Paper>
        </Column>  
        <Column>
          <iframe width="560" height="315" src="https://www.youtube.com/embed/Ta4xuThmAsQ" frameBorder="0" allowFullScreen></iframe>
        </Column>
      </Row>
    </Grid>;
  };

}

Я использую Material-UI

4b9b3361

Ответ 1

Вероятно, ваш файл Layout не экспортирует одну из переменных из этой строки

import { Grid, Row, Column, List, ListItem } from '../../components/Layout';

Предупреждение произойдет, если один из них undefined.

Ответ 2

Я знаю, что правильное решение найдено здесь, но я просто хотел поделиться еще одной возможной причиной появления предупреждения ReactJS React.createElement: type should not be null or undefined.

Это также может произойти, если у вас есть циклическая зависимость в ваших модулях. Затем выполнение console.log() вашего импортированного модуля вернет пустой объект.

Для получения дополнительной информации см. этот другой поток stackoverflow: Требовать возвращает пустой объект

Ответ 3

На всякий случай кто-то столкнулся с этой проблемой, и вышеупомянутые решения не помогают, все, что мне нужно было сделать, - это переместить мою функцию верхнего уровня ReactDOM.render() ниже остальной части JavaScript, чтобы гарантировать, что все переменные были инициализированы до называемый. Я следил за учебником в https://reactjs.net/getting-started/tutorial_aspnet4.html