Erreur non détectée: violation invariante: le type d'élément n'est pas valide: attend une chaîne (pour les composants intégrés) ou une classe / fonction mais a obtenu: objet

Je reçois cette erreur:

Erreur non détectée: violation invariante: le type d'élément n'est pas valide: attendait une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais a obtenu: objet.

Voici mon code:

var React = require('react')
var ReactDOM =  require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    )
  }
})

var About = require('./components/Home')
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body)

Mon Home.jsxdossier:

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" />
    );
  },
});

module.exports = Home;

Dans mon cas (en utilisant Webpack ), c'était la différence entre:

import {MyComponent} from '../components/xyz.js';

contre

import MyComponent from '../components/xyz.js';

Le second fonctionne alors que le premier est à l'origine de l'erreur. Ou le contraire.

vous devez exporter par défaut ou exiger (chemin) .default

var About = require('./components/Home').default

Vous venez de modulariser l'un de vos composants React? Si oui, vous obtiendrez cette erreur si vous avez oublié de spécifier module.exports , par exemple:

composant / code non modulaire précédemment valide:

var YourReactComponent = React.createClass({
    render: function() { ...

composant / code modulaire avec module.exports :

module.exports = React.createClass({
    render: function() { ...

Si vous obtenez cette erreur, cela peut être dû au fait que vous importez un lien à l'aide

import { Link } from 'react-router'

au lieu de cela, il pourrait être préférable d'utiliser

importer {Link} à partir de ' react-router-dom '
                      ^ -------------- ^

Je crois que c'est une exigence pour la version 4 du routeur React

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router est également l'une des propriétés de react-router. Donc, changez vos modules nécessitent du code comme ça:

  var reactRouter = require('react-router')
  var Router = reactRouter.Router
  var Route = reactRouter.Route
  var Link = reactRouter.Link

Si vous souhaitez utiliser la syntaxe ES6 du lien use ( import), utilisez babel comme assistant.

BTW, pour faire vos travaux de code, nous pouvons ajouter {this.props.children}dans le App, comme

render() {
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/about">About</Link></li>
      </ul>
      {this.props.children}
    </div>

  )
}

Ne soyez pas surpris par la liste des réponses à une seule question. Il existe plusieurs causes à ce problème;

Pour mon cas, l'avertissement était

warning.js: 33 Avertissement: React.createElement: type n'est pas valide - attend une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais a obtenu: undefined. Vous avez probablement oublié d'exporter votre composant à partir du fichier dans lequel il est défini. Vérifiez votre code sur index.js: 13.

Suivi de l'erreur

invariant.js: 42 Erreur non interceptée: le type d'élément n'est pas valide: attendait une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais a obtenu: non défini. Vous avez probablement oublié d'exporter votre composant à partir du fichier dans lequel il est défini.

Je ne pouvais pas comprendre l'erreur car elle ne mentionne aucune méthode ni aucun nom de fichier. J'ai pu résoudre seulement après avoir regardé cet avertissement, mentionné ci-dessus.

J'ai la ligne suivante à l'index.js.

<ConnectedRouter history={history}>

Lorsque j'ai cherché sur Google l'erreur ci-dessus avec le mot-clé "ConnectedRouter", j'ai trouvé la solution dans une page GitHub.

L'erreur est due au fait que lorsque nous installons le react-router-reduxpackage, nous installons par défaut celui-ci. https://github.com/reactjs/react-router-redux mais pas la bibliothèque réelle.

Pour résoudre cette erreur, installez le package approprié en spécifiant la portée npm avec @

npm install react-router-redux@next

Vous n'avez pas besoin de supprimer le package mal installé. Il sera automatiquement écrasé.

Je vous remercie.

PS: Même un avertissement vous aide. Ne négligez pas l' avertissement simplement en regardant l' erreur seule.

Dans mon cas, l'un des modules enfants exportés ne renvoyait pas un composant de réaction approprié.

const Component = <div> Content </div>;

au lieu de

const Component = () => <div>Content</div>;

L'erreur indiquée était pour le parent, donc n'a pas pu comprendre.

Dans mon cas, cela était dû à des symboles de commentaire erronés. C'est faux:

<Tag>
    /*{ oldComponent }*/
    { newComponent }
</Tag>

C'est correct:

<Tag>
    {/*{ oldComponent }*/}
    { newComponent }
</Tag>

Remarquez les accolades

J'ai la même erreur: CORRECTION D'ERREUR !!!!

J'utilise 'react-router-redux' v4 mais elle est mauvaise .. Après npm installez react-router-redux @ next je suis sur "react-router-redux": "^ 5.0.0-alpha.9",

ET C'EST LE TRAVAIL

J'ai obtenu cela en import App from './app/';s'attendant à ce qu'il soit importé ./app/index.js, mais à la place, il a été importé ./app.json.

J'avais le même problème et j'ai réalisé que je fournissais un composant Undefined React dans le balisage JSX. Le fait est que le composant React à restituer a été calculé dynamiquement et il a fini par être indéfini!

L'erreur a déclaré:

Violation invariante: le type d'élément n'est pas valide: attendait une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais a obtenu: non défini. Vous avez probablement oublié d'exporter votre composant à partir du fichier dans lequel il est défini. Vérifiez la méthode de rendu de C.,

L'exemple produisant cette erreur:

var componentA = require('./components/A');
var componentB = require('./components/B');

const templates = {
  a_type: componentA,
  b_type: componentB
}

class C extends React.Component {
  constructor(props) {
    super(props);
  }
  
  // ...
  
  render() {
    //Let´s say that depending on the uiType coming in a data field you end up rendering a component A or B (as part of C)
    const ComponentTemplate = templates[this.props.data.uiType];
    return <ComponentTemplate></ComponentTemplate>
  }
  
  // ...
}

Le problème était qu'un "uiType" non valide était fourni et que cela produisait donc undefined comme résultat:

templates['InvalidString']

Juste un ajout rapide à cela. J'avais le même problème et pendant que Webpack compilait mes tests et que l'application fonctionnait bien. Lorsque j'importais mon composant dans le fichier de test, j'utilisais la casse incorrecte sur l'une des importations et cela provoquait la même erreur.

import myComponent from '../../src/components/myComponent'

Aurait du être

import myComponent from '../../src/components/MyComponent'

Notez que le nom d'importation myComponentdépend du nom de l'exportation à l'intérieur du MyComponentfichier.

Eu un problème similaire avec les dernières versions de React Native 0.50 et plus.

Pour moi, c'était une différence entre:

import App from './app'

et

import App from './app/index.js'

(ce dernier a résolu le problème). Cela m'a pris des heures pour attraper cette nuance étrange et difficile à remarquer :(

Une autre solution possible, qui a fonctionné pour moi:

Actuellement, react-router-reduxest en version bêta et npm renvoie 4.x, mais pas 5.x. Mais le @types/react-router-redux5.x retourné. Il y avait donc des variables non définies utilisées.

Forcer NPM / Yarn à utiliser 5.x l'a résolu pour moi.

Étant donné votre erreur de:

'Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object'

Vous avez 2 options:

1. Votre fichier d'exportation peut avoir le mot defaultcomme dans export default class ____.... Ensuite, votre importation devra éviter de l'utiliser {}autour de lui. Un péchéimport ____ from ____

2. Évitez d'utiliser le mot par défaut. Votre export ressemble export class ____... alors à votre import doit utiliser le {}. Commeimport {____} from ____

Dans mon cas, l'importation se faisait implicitement en raison d'une bibliothèque.

J'ai réussi à le réparer en changeant

export class Foo

à

export default class Foo.

J'ai rencontré cette erreur lorsque j'avais un fichier .jsx et .scss dans le même répertoire avec le même nom racine.

Ainsi, par exemple, si vous avez Component.jsxet Component.scssdans le même dossier et que vous essayez de le faire:

import Component from ./Component

Webpack est apparemment confus et, au moins dans mon cas, essaie d'importer le fichier scss quand je veux vraiment le fichier .jsx.

J'ai pu le corriger en renommant le fichier .scss et en évitant toute ambiguïté. J'aurais aussi pu importer explicitement Component.jsx

Et dans mon cas, il me manquait juste un point-virgule lors de l'importation-decleration dans l'un de mes sous-modules.

Corrigé en changeant ceci:

import Splash from './Splash'

pour ça:

import Splash from './Splash';

Dans mon cas, j'utilisais l'exportation par défaut, mais pas l'exportation d'un functionou React.Component, mais juste un JSXélément, c'est-à-dire

Erreur:

export default (<div>Hello World!</div>)

Travaux :

export default () => (<div>Hello World!</div>)

En plus des import/ exportproblèmes mentionnés. J'ai trouvé que l'utilisation React.cloneElement()d'ajout propsà un élément enfant et le rendu m'ont donné cette même erreur.

J'ai dû changer:

render() {
  const ChildWithProps = React.cloneElement(
    this.props.children,
    { className: `${PREFIX}-anchor` }
  );

  return (
    <div>
      <ChildWithProps />
      ...
    </div>
  );
}

à:

render() {
  ...
  return (
    <div>
      <ChildWithProps.type {...ChildWithProps.props} />
    </div>
  );
}

Voir la React.cloneElement() documentation pour plus d'informations.

J'ai eu cette erreur dans le routage réactif, le problème était que j'utilisais

<Route path="/" component={<Home/>} exact />

mais c'était une mauvaise route qui nécessite un composant en tant que classe / fonction, donc je l'ai changé en

<Route path="/" component={Home} exact />

et ça a marché. (Évitez juste les accolades autour du composant)

Pour moi, c'est que mes composants de style ont été définis après ma définition de composant fonctionnel. Cela n'arrivait que dans la mise en scène et pas localement pour moi. Une fois que j'ai déplacé mes composants de style au-dessus de ma définition de composant, l'erreur a disparu.

Cela signifie que certains de vos composants importés sont mal déclarés ou inexistants

J'ai eu un problème similaire, je l'ai fait

import { Image } from './Shared'

mais quand j'ai regardé dans le fichier partagé, je n'avais pas de composant 'Image' plutôt qu'un composant 'ItemImage'

import { ItemImage } from './Shared';

Cela se produit lorsque vous copiez du code à partir d'autres projets;)

J'ai eu un problème avec React.Fragment, car la version de ma réaction l'était < 16.2, alors je m'en suis débarrassé.

@Balasubramani M m'a sauvé ici. Je voulais en ajouter un de plus pour aider les gens. C'est le problème lorsque vous collez trop de choses ensemble et que vous êtes cavalier avec les versions. J'ai mis à jour une version de material-ui et dois changer

import Card, {CardContent, CardMedia, CardActions } from "@material-ui/core/Card"; 

pour ça:

import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';

J'ai eu le même problème et le problème était que certains fichiers js n'étaient pas inclus dans le regroupement de cette page spécifique. Essayez d'inclure ces fichiers et le problème peut être résolu. J'ai fait ça:

.Include("~/js/" + jsFolder + "/yourjsfile")

et cela a résolu le problème pour moi.

C'était pendant que j'utilisais React dans Dot NEt MVC

J'ai découvert une autre raison de cette erreur. Cela a à voir avec le CSS-in-JS renvoyant une valeur nulle au JSX de niveau supérieur de la fonction de retour dans un composant React.

Par exemple:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return null;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

J'obtiendrais cet avertissement:

Avertissement: React.createElement: le type n'est pas valide - attend une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais a obtenu: null.

Suivi de cette erreur:

Erreur non interceptée: le type d'élément n'est pas valide: attendait une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais a obtenu: null.

J'ai découvert que c'était parce qu'il n'y avait pas de CSS avec le composant CSS-in-JS que j'essayais de rendre. Je l'ai corrigé en m'assurant qu'il y avait du CSS renvoyé et non une valeur nulle.

Par exemple:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return Css;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

Je reçois presque la même erreur:

Uncaught (promis) Erreur: le type d'élément n'est pas valide: attendait une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais a obtenu: objet.

J'essayais d'importer un composant fonctionnel pur à partir d'une autre bibliothèque de nœuds que mon équipe a développée. Pour le corriger, j'ai dû passer à une importation absolue (référençant le chemin d'accès au composant à l'intérieur node_modules) de

importer FooBarList depuis 'team-ui';

à

importer FooBarList depuis 'team-ui / lib / components / foo-bar-list / FooBarList';

Dans mon cas, il a fini par être le composant externe importé comme ceci:

import React, { Component } from 'react';

puis déclaré comme:

export default class MyOuterComponent extends Component {

où un composant interne a importé le React nu:

import React from 'react';

et pointé dedans pour la déclaration:

export default class MyInnerComponent extends ReactComponent {

Dans mon cas, il m'a fallu beaucoup de temps pour rechercher et vérifier de nombreuses façons, mais uniquement corrigé de cette façon: supprimez "{", "}" lors de l'importation d'un composant personnalisé:

import OrderDetail from './orderDetail';

Ma mauvaise façon était:

import { OrderDetail } from './orderDetail';

Parce que dans le fichier orderDetail.js, j'ai exporté OrderDetail en tant que classe par défaut:

class OrderDetail extends Component {
  render() {
    return (
      <View>
        <Text>Here is an sample of Order Detail view</Text>
      </View>
    );
  }
}

export default OrderDetail;