Erreur non interceptée: l'Invariant de Violation: type d'Élément n'est pas valide: attend une chaîne de caractères (pour les composants intégrés) ou de classe/fonction mais j'ai reçu: objet
J'obtiens cette erreur:
Erreur non interceptée: l'Invariant de Violation: type d'Élément n'est pas valide: attendu
une chaîne de caractères (pour les composants intégrés) ou de classe/fonction (pour les composites
les composants) mais: objet.
C'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 la Maison.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;
- Veuillez prendre un coup d'oeil à stackoverflow.com/questions/36795819/...
- Double Possible de Quand dois-je utiliser des accolades pour ES6 importation?
- Cette erreur peut augmenter si la vous essayez d'importer un inexistante composant. Assurez-vous que vous n'avez pas de faute de frappe et que la composante en effet nommé de cette façon. Dans le cas de bibliothèques assurez-vous d'utiliser la bonne version, car les composants peuvent avoir différents noms dans différentes versions.
- Cela peut également se produire lorsque vous définissez une propriété, peut-être grâce à ES6 destruction, avec le même nom qu'un déjà importé composant (et essayer de le transmettre à un autre composant).
Vous devez vous connecter pour publier un commentaire.
Dans mon cas (à l'aide de Webpack) c'était la différence entre:
vs
La seconde les travaux, tandis que le premier est à l'origine de l'erreur. Ou le contraire.
<TabBarIOS.item>
à<TabBarIOS.Item>
export default MyComponent
ajoutéimport {App} from './App';
, l'erreur est'./App' does not contain an export named 'App'.
, et si j'ai supprimer les accolades, l'erreur devientElement type is invalid: expected a string ... but got: object.
. Bienvenue à l'ES d'importation de l'enfer.</rant>{ Component }
au lieu de la simple importation sans les accolades. A été de travailler avec Réagissent Natif. Mercivous avez besoin à l'exportation par défaut ou besoin(chemin d'accès).par défaut
React.createFactory(importedComponent);
export default
déclarationsexports.default
, donc vous devez utiliser.default
lorsque vous importez le module. Une façon de se débarrasser de cela est d'utiliser babel-plugin-ajouter-module-exportations qui restaurer le comportement par défaut.Vous avez juste modulaire d'un de vos Réagir composants? Si oui, vous obtiendrez cette erreur si vous avez oublié de spécifier module.les exportations, par exemple:
non-modulaire précédemment en vigueur composant/code:
modulaire de composants/code avec module.les exportations:
module.exports = YourReactComponent
export default class YourReactComponent extends React.Component {
module.exports
obtenez toujours l'erreurSi vous obtenez cette erreur, il pourrait être parce que vous êtes à l'importation de lien à l'aide de
import { Link } from 'react-router'
au lieu de cela, il pourrait être préférable d'utiliser
Je crois que c'est une exigence de réagir routeur version 4
react
, au lieu dereact-router-dom
. Correction du problème. Jamais vu ce message err avant.https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4
Router
est également l'une des propriétés dereact-router
.Ainsi le changement de vos modules ne nécessitent code comme ça:
Si vous souhaitez utiliser ES6 syntaxe de l'utilisation de la connexion(
import
), l'utilisation babel comme l'aide.BTW, pour faire de votre code fonctionne, nous pouvons ajouter
{this.props.children}
dans leApp
,comme
Ne pas être surpris par la liste de réponses à une seule question. Il y a plusieurs causes à ce problème;
Pour mon cas, l'avertissement a été
Suivie par l'erreur
Je n'arrivais pas à comprendre l'erreur, puisqu'il ne parle pas de n'importe quelle méthode ou un nom de fichier. J'ai été en mesure de résoudre seulement après avoir regardé cet avertissement, mentionné ci-dessus.
J'ai la ligne suivante à l'index.js.
Quand j'ai googlé pour l'erreur ci-dessus avec le mot-clé "ConnectedRouter" j'ai trouvé la solution dans une page GitHub.
L'erreur est parce que, lorsque nous avons installé
react-router-redux
paquet, par défaut, nous l'installer.https://github.com/reactjs/react-router-redux , mais pas la bibliothèque.
Pour résoudre cette erreur, installer le package en spécifiant le mécanisme national de prévention de la portée avec
@
Vous n'avez pas besoin de retirer le tort paquet installé. Il sera remplacé automatiquement.
Merci.
PS: Même avertissement vous aide. Ne négligez pas avertissement simplement en regardant la erreur seul.
Dans mon cas, l'un de l'exportation de l'enfant module n'a pas été de retour un bon de réagir composant.
const Component = <div> Content </div>;
au lieu de
const Component = () => <div>Content</div>;
L'erreur indiquée est de la mère, et donc ne pouvait pas comprendre.
Dans mon cas, cela a été causé par de mauvais commentaire symboles. C'est faux:
C'est correct:
Avis les accolades
J'ai la même erreur :
ERREUR FIX !!!!
- Je utiliser 'réagir-routeur-redux' v4 mais elle est mauvaise..
Après npm install réagir-routeur-redux@next
Je suis sur "réagissent-routeur-redux": "^5.0.0-alpha.9",
ET C'EST UN TRAVAIL
Eu le même problème avec Réagissent Natif dernières versions de 0,50 et jusqu'.
Pour moi, c'était une différence entre:
et
(la dernière correction du problème). M'a pris des heures pour attraper cette étrange, difficile de remarquer la nuance 🙁
Je l'ai obtenu en faisant
import App from './app/';
s'attendait à une importation./app/index.js
, mais au lieu importés./app.json
.J'ai eu le même problème et réalisé que j'étais en fournissant un Undefined Réagir composant dans le JSX de balisage. Le truc, c'est que la réagir composant de rendu a été calculée de manière dynamique et il a fini par être pas défini!
L'erreur a déclaré:
L'exemple de la production de cette erreur:
JS:
Le problème était qu'un invalide "uiType" a condition et, par conséquent, ce ne produisait pas défini comme le résultat:
JS:
const MyComponent = () => <div>my component</div>;
juste pour voir si les importations de travail normalement ensuite.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
renvoyé 5.x. Donc il n'y avait pas défini les variables utilisées.Forcer MNP/Fils à utiliser 5.x résolu pour moi.
Juste un petit plus de cette. J'ai eu le même problème et tout Webpack était en train de rassembler mes tests et la demande est en cours d'exécution fine. Quand j'étais importer mes composant dans le fichier de test, j'ai été en utilisant la mauvaise affaire à un seul de ses importations et à cause de la même erreur.
Doit avoir été
Notez que le nom d'importation
myComponent
dépend du nom de l'exportation à l'intérieur de laMyComponent
fichier.Dans mon cas, l'importation qui se passait implicitement en raison d'une bibliothèque.
J'ai réussi à le résoudre en changeant
export class Foo
à
export default class Foo
.Je suis tombé sur cette erreur quand j'ai eu un .jsx et .scss fichier dans le même répertoire avec le même nom de racine.
Ainsi, par exemple, si vous avez
Component.jsx
etComponent.scss
dans le même dossier et que vous essayez de le faire:import Component from ./Component
Webpack obtient apparemment confus et, au moins dans mon cas, essaie d'importer le fichier scss quand je veux vraiment le .jsx fichier.
J'ai été en mesure de le réparer en renommant le .scss de fichiers et d'éviter l'ambiguïté. J'ai pu avoir aussi explicitement importés Composant.jsx
Et dans mon cas, j'étais juste manque un point-virgule à l'importation-decleration dans une de mes sous-modules.
Fixé par la modification de cette:
à ceci:
Dans mon cas, j'ai été en utilisant la valeur par défaut à l'exportation, mais pas de l'exportation d'un
function
ouReact.Component
, mais juste unJSX
élément, c'est à direErreur:
Travaux :
Donné votre erreur d':
'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:
Votre fichier d'exportation peut avoir le mot
default
comme dansexport default class ____....
Ensuite, votre importation pour éviter d'utiliser
{}
autour d'elle. Comme dansimport ____ from ____
Éviter d'utiliser le mot par défaut. Ensuite, votre exportation ressemble
export class ____...
Ensuite, votre importation doit utiliser le
{}
. Commeimport {____} from ____
export default {component name}
et j'ai oublié de l'ajouterPour moi, c'était que mon style-composants ont été définis d'après ma fonctionnelle de la définition de composant. Il a été produit seulement dans la mise en scène et pas localement pour moi. Une fois que j'ai déplacé mon style-composants au-dessus de ma définition du composant à l'erreur s'en alla.
En plus de
import
/export
questions mentionnées. J'ai trouvé à l'aide deReact.cloneElement()
pour ajouterprops
à un élément d'enfant et de rendu et ensuite il m'a donné ce même message d'erreur.J'ai dû changer:
à:
Voir le
React.cloneElement()
docs pour plus d'info.Cela signifie que certains de vos Composants importés sont, à tort, déclaré ou inexistant
J'ai eu un problème similaire, je n'ai
mais Quand j'ai regardé dans le fichier Partagé, je n'avais pas une "Image" plutôt un "ItemImage" Composant
Ce qui se passe quand vous copiez le code d'autres projets 😉
@Balasubramani M a sauvé de moi ici. Voulais ajouter un de plus pour aider les gens. C'est le problème quand vous êtes collant trop de choses ensemble et d'être cavalier avec les versions. J'ai mis à jour une version de l'interface utilisateur et la nécessité de changer
à ceci:
J'ai eu le même problème et la question a certains fichiers js n'ont pas été inclus dans le regroupement de cette page en particulier. Essayez, y compris ceux de fichier et le problème pourrait être résolu.
Je l'ai fait:
et il a fixé la question pour moi.
C'était pendant que j'étais à l'aide de Réagir en Dot NEt MVC
J'ai découvert une autre raison de cette erreur. Il a à voir avec les CSS-en-JS retourner une valeur null pour le haut-niveau JSX de la fonction retour dans une Réagir composant.
Par exemple:
Je voudrais obtenir cet avertissement:
Suivie par cette erreur:
J'ai découvert que c'était parce qu'il n'y a pas de CSS avec le CSS-en-JS composant que j'essayais de rendre. Je le fixe en le faisant bien sûr, il était CSS retournée, et pas une valeur null.
Par exemple:
Je suis presque la même erreur:
J'ai essayé d'importer un pur élément fonctionnel à un autre nœud de la bibliothèque de mon équipe a mis au point. Pour le fixer, j'ai dû changer de manière absolue à l'importation (référencement le chemin à l'intérieur de
node_modules
) à partir deà
Dans mon cas, il a fini par être à l'extérieur de composants importés comme ceci:
import React, { Component } from 'react';
puis déclarée comme:
export default class MyOuterComponent extends Component {
où intérieure d'un composant importé Réagir à nu:
import React from 'react';
et pointillés en lui pour la déclaration:
export default class MyInnerComponent extends ReactComponent {
Dans mon cas, il m'a fallu beaucoup de temps pour rechercher et contrôlée des égards, mais seulement de cette manière: supprimer "{", "}" lors de l'importation d'un composant personnalisé:
Mon mauvais sens était:
Parce que dans le orderDetail.js fichier, j'ai exporté OrderDetail que la classe par défaut:
J'ai cette erreur lors de la mise à niveau de toutes les libs à la dernière version
dans les anciennes version sont les importations
mais dans la nouvelle version, ils sont remplacés par les suivants
Donc être de vérifier la bonne tout votre importation sont disponibles en utilisant le contrôle sur
Dans mon cas, c'était les balises meta.
J'ai été en utilisant
Je suppose que MetaTags est un défaut de l'exportation, de Sorte qu'un changement de cette résolu pour moi, a pris des heures pour savoir laquelle était la cause.
J'ai eu un problème avec
React.Fragment
, parce que la version de mon réagir a été< 16.2
, j'ai donc de s'en débarrasser.de l'exportation au fond de fichier peut résoudre.
const IndicatorCloak = (accessoires) => { ... }
l'exportation par défaut IndicatorCloak;
J'ai eu cette erreur de réagir de routage, le problème est que j'ai été en utilisant
<Route path="/" component={<Home/>} exact />
mais c'était une erreur d'itinéraire nécessite composant en tant que classe/fonction donc je l'ai changé pour
<Route path="/" component={Home} exact />
et cela a fonctionné. (Juste éviter les accolades autour du composant)