web-dev-qa-db-fra.com

Erreur non capturée: Violation invariante: Le type d'élément n'est pas valide: on attend une chaîne (pour les composants intégrés) ou une classe/fonction mais got: object

Je reçois cette erreur: 

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

Ceci est 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.jsx fichier:

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;
reactjsreact-router
406
Pankaj Thakur

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 a provoqué l'erreur.

732
JohnL

vous avez besoin d'exporter par défaut ou require (chemin) .default 

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

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 valide antérieurement non modularisé:

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

composant modulaire/code avec module.exports :

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

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4Router est également une propriété de react-router____ changez vos modules nécessitent un code comme celui-ci:

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

Si vous souhaitez utiliser la syntaxe ES6 utilisée par le lien (import), utilisez babel as helper.

BTW, pour que votre code fonctionne, nous pouvons ajouter {this.props.children} dans la App, Like.

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

  )
}
16
David Guan

Si vous obtenez cette erreur, c'est peut-être parce que vous importez un lien à l'aide de 

import { Link } from 'react-router'

à la place, il pourrait être préférable d’utiliser 

 importer {Link} de 'réagir-routeur-dom'
 ^ -------------- ^

Je crois que c'est une exigence pour la version 4 du routeur de réaction

15
NSCoder

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

Pour mon cas, l'avertissement était

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

Suivi de l'erreur

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

Je ne comprenais pas l'erreur car elle ne mentionnait aucune méthode ni aucun nom de fichier. J'ai été capable de résoudre qu'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 package react-router-redux, 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 bon paquet en spécifiant la portée de npm avec @

npm install react-router-redux@next

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

Je vous remercie.

PS: Même avertissement vous aide. Ne négligez pas avertissement simplement en regardant le erreur.

12
Balasubramani M

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

const Component = <div> Content </div>; au lieu de const Component = () => <div>Content</div>;

L'erreur affichée était pour le parent, donc impossible à comprendre.

9
Katti

J'ai la même erreur: ERROR FIX !!!!

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

7
Thibault Jp

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

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

C'est correct:

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

Remarquez les accolades

7
tuanh118

Avait un problème similaire avec React Native dernières versions 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). Il m'a fallu des heures pour comprendre cette nuance étrange et difficile à remarquer :(

6
Oleg

Je l'ai obtenu en faisant import App from './app/'; en m'attendant à importer ./app/index.js, mais il a plutôt importé ./app.json.

5
tybro0103

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 réactif à restituer a été calculé dynamiquement et qu’il a finalement été indéfini!

L'erreur a déclaré:

Violation invariante: Le type d'élément n'est pas valide: une chaîne (pour les composants intégrés) ou une classe/fonction (pour les composants composites) est attendue, 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" invalide avait été fourni et que, par conséquent, cela produisait un résultat non défini:

templates['InvalidString']

4
Christian Adam

Juste comme un ajout rapide à cela. J'avais le même problème et pendant que Webpack compilait mes tests, l'application fonctionnait bien. Lorsque j'importais mon composant dans le fichier de test, j'utilisais le cas incorrect sur l'une des importations et cela causait 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 myComponent dépend du nom de l'exportation contenu dans le fichier MyComponent.

4
Blackout1985

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

Actuellement, react-router-redux est en version bêta et npm renvoie 4.x, mais pas 5.x. Mais le @types/react-router-redux a renvoyé 5.x. Donc, il y avait des variables non définies utilisées.

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

3
Florian Richter

Dans mon cas, l'importation se produisait implicitement à cause d'une bibliothèque. 

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

export class Foo

à

export default class Foo.

2
thedayturns

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

Corrigé en changeant ceci:

import Splash from './Splash'

pour ça:

import Splash from './Splash';
2
Rikard Askelöf

Dans mon cas, j’utilisais l’export par défaut, mais pas un function ou React.Component, mais juste un élément JSX, c’est-à-dire.

Erreur:

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

Travaux :

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

import Rating from 'src/components/Rating';

contre

import Rating from 'src/components/Rating.js';

le second a fonctionné pour moi.

1
Bat

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.

Donc, par exemple, si vous avez Component.jsx et Component.scss dans le même dossier et que vous essayez de faire ceci:

import Component from ./Component

Webpack est apparemment confus et essaie, du moins dans mon cas, d'importer le fichier scss alors que je le souhaite vraiment.

J'ai pu résoudre le problème en renommant le fichier .scss et en évitant toute ambiguïté. J'aurais aussi pu importer explicitement Component.jsx

1
bergie3000

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", mais plutôt de composant "ItemImage"

import { ItemImage } from './Shared';

Cela se produit lorsque vous copiez le code d’autres projets;)

0
webmaster

Dans mon cas, c’étaient les balises META.

J'utilisais

const MetaTags = require('react-meta-tags');

Je suppose que MetaTags est une exportation par défaut. Il a donc fallu des heures pour déterminer la cause de cette modification.

const { MetaTags } = require('react-meta-tags');
0
Sathesh Balakrishnan Manohar

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

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

mais il a été mal route nécessite composant en tant que classe/fonction alors je l'ai changé pour

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

et cela a fonctionné. (Évitez juste les accolades autour du composant)

0
Naxxa Consulting

J'ai découvert une autre raison de cette erreur. Cela concerne le CSS-in-JS qui renvoie une valeur null 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>
  );
}

Je voudrais obtenir cet avertissement:

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 obtenu: null.

Suivi de cette erreur:

Erreur non capturée: le type d'élément 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.

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 que le code CSS était 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>
  );
}
0
alucinare

exporter au bas du fichier peut le résoudre.

const IndicatorCloak = (props) => {...} exportateur par défaut IndicatorCloak;

0
Noimang

Je reçois presque la même erreur:

Non capturé (promis) Erreur: Le type d'élément n'est pas valide: on attend une chaîne (pour les composants intégrés) ou une classe/fonction (pour les composants composites) mais got: object.

J'essayais d'importer un composant purement fonctionnel à partir d'une autre bibliothèque de nœuds développée par mon équipe. Pour résoudre ce problème, je devais passer à une importation absolue (référençant le chemin du composant dans node_modules) à partir de

importer FooBarList de 'team-ui';

à

importer FooBarList à partir de 'équipe-ui/lib/composants/foo-bar-list/FooBarList';

0
Patrick

Dans mon cas, il m'a fallu beaucoup de temps pour rechercher et vérifier de nombreuses manières, mais uniquement résolues 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;
0
tiennsloit

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 pourrait être résolu . J'ai fait ça:

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

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

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

0
Jason

J'ai eu cette erreur lors de la mise à niveau de toutes les libs vers la dernière version

dans les anciennes versions suivantes sont des importations

import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';

mais dans la nouvelle version, ils sont remplacés par les suivants

import { TabView, PagerPan } from "react-native-tab-view";

Alors vérifiez que toutes vos importations sont disponibles en utilisant le clic de contrôle

0
Rajesh Nasit

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

0
Eugene

Je l'ai compris lors de l'introduction de TypeScript dans mon application JavaScript. Dans un fichier js, lors de l'importation d'un fichier tsx, je devais spécifier .tsx dans l'importation.

à partir de import ComponentName from "../component-name";

à import ComponentName from "../component-name.tsx";

0
kentrh

Le problème peut également être un alias utilisé pour une exportation par défaut.

Changement

import { Button as ButtonTest } from "../theme/components/Button";

à

import { default as ButtonTest } from "../theme/components/Button";

résolu le problème pour moi.

0
Simon

@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 et que vous êtes cavalier avec les versions. J'ai mis à jour une version de material-ui et j'ai besoin de 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';
0
Kyle Pennell

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

import React, { Component } from 'react';

et ensuite déclaré comme:

export default class MyOuterComponent extends Component {

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

import React from 'react';

et en pointillé pour la déclaration:

export default class MyInnerComponent extends ReactComponent {

0
krayzk

J'avais le même problème parce que j'avais importé une bibliothèque incorrecte, j'ai donc vérifié la documentation de la bibliothèque et la route a été modifiée avec la nouvelle version, la solution était la suivante:

import {Ionicons} from '@expo/vector-icons';

et j'écrivais de manière incorrecte:

import {Ionicons} from 'expo';
0
hackemate ninja

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

0
Jadam

En plus des problèmes import/export mentionnés. J'ai trouvé l'utilisation de React.cloneElement() pour ajouter props à un élément enfant, puis son rendu m'a donné la même erreur.

Je devais 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()docs pour plus d’informations.

0
Greg K

Compte tenu de 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 default comme dans export default class ____.... Ensuite, votre importation devra éviter d'utiliser {} autour. Comme dans import ____ from ____

  2. Évitez d'utiliser le mot par défaut. Ensuite, votre exportation ressemble à export class ____... Ensuite, votre importation doit utiliser le {}. Comme import {____} from ____

0
jasonleonhard