web-dev-qa-db-fra.com

Reactjs: Avertissement: React.createElement: le type ne doit pas être nul ou non défini

c'est l'erreur complète

Avertissement: React.createElement: le type ne doit pas être nul ou non défini. Il doit s'agir d'une chaîne (pour les éléments DOM) ou d'une ReactClass (pour les composants composites).

et c'est tout ce que j'ai dans cette vue

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>;
  };

}

J'utilise Material-UI

javascriptreactjscreateelement
33
Non

Il est probable que votre fichier Layout n'exporte pas l'une des variables de cette ligne

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

L'avertissement se produirait si l'un d'entre eux n'était pas défini.

33
Ed Ballot

Je sais que la bonne solution a été trouvée ici, mais je voulais juste partager une autre raison possible du déclenchement de l'avertissement ReactJS React.createElement: type should not be null or undefined.

Cela peut également se produire lorsque vous avez une dépendance circulaire dans vos modules. Ensuite, faire une console.log() de votre module importé retournerait un objet vide.

Pour plus de détails, jetez un œil à cet autre thread stackoverflow: Require renvoie un objet vide

6
pjehan

Juste au cas où quelqu'un aurait rencontré ce problème et que les solutions ci-dessus n'aident pas, tout ce que j'avais à faire était de déplacer ma fonction ReactDOM.render () de niveau supérieur sous le reste du JavaScript pour garantir que toutes les variables étaient initialisées avant d'être appelées. Je suivais le tutoriel sur https://reactjs.net/getting-started/tutorial_aspnet4.html

2
Michael McAlpin