De réagir.createElement: type n'est pas valide prévu une chaîne de caractères
Essayer d'obtenir réagir-routeur (v4.0.0) et de réagir à chaud--loader (3.0.0-beta.6) à jouer très bien, mais getitng l'erreur suivante dans le navigateur de la console:
Avertissement: Réagir.createElement: type est invalide -- attend une chaîne de caractères
(pour les composants intégrés) ou de classe/fonction (pour les composites
les composants) mais: undefined. Vous avez probablement oublié d'exporter votre
composant à partir du fichier est défini dans.
index.js:
import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';
const renderApp = (appRoutes) => {
ReactDom.render(appRoutes, document.getElementById('root'));
};
renderApp( routes() );
routes.js:
import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';
const routes = () => (
<AppContainer>
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Products} />
<Route path="/basket" component={Basket} />
</Route>
</Router>
</Provider>
</AppContainer>
);
export default routes;
- Si vous utilisez réagissent-routeur-config assurez-vous d'utiliser le
component
de la propriété au lieu derender
, parce que le paquet ne prend pas en charge le plus tard. Voir en savoir plus sur GitHub.
Vous devez vous connecter pour publier un commentaire.
La plupart du temps ce qui se passe c'est parce que vous n'avez pas exportés /importés correctement.
Erreur courante:
Il existe quelques façons dont elle peut être fausse, mais que l'erreur est en raison de l'importation/exportation erreur 60% du temps, à chaque fois.
Modifier
Généralement vous devrait obtenir une stacktrace qui indique la position approximative de l'endroit où l'erreur se produit. Généralement, il le suit tout de suite après le message que vous avez dans votre question initiale.
Si elle ne se montre pas, il pourrait être intéressant de rechercher pourquoi (peut-être un paramètre de construction que vous êtes absent). Peu importe, si elle ne se montre pas, le seul recours est de rétrécir où l'exportation/l'importation échoue.
Malheureusement, la seule façon de le faire, sans une stacktrace est de supprimer manuellement chaque module ou sous-module jusqu'à ce que vous n'obtenez pas l'erreur plus, puis de travailler votre chemin de retour en haut de la pile.
Edit 2
Via les commentaires, c'était en effet une importation question, notamment l'importation d'un module qui n'existait pas
<IndexRoute component={Products} />
import { Select } from 'react-select';
et cela a changéimport Select from 'react-select';
Essayer cette
dans votre App.js
J'ai été faire cette erreur ainsi.
J'ai été en utilisant:
import BrowserRouter from 'react-router-dom';
Correctif était en train de faire plutôt ceci:
import { BrowserRouter } from 'react-router-dom';
J'ai eu ce problème quand j'ai ajouté un fichier css dans le même dossier que le fichier de composant.
Mon instruction d'importation a été:
qui était très bien quand il n'y avait qu'un seul fichier, Moncomposant.jsx. (J'ai vu ce format dans un exemple, et il a donné un essai, puis oublié que je l'avais fait)
Quand j'ai ajouté Moncomposant.scss pour le même dossier, les importer ensuite échoué. Peut-être que JavaScript chargé de la .scss fichier au lieu de cela, et donc il n'y a pas d'erreur.
Ma conclusion: toujours spécifier l'extension de fichier même si il n'y a qu'un seul fichier, dans le cas où vous ajoutez un autre plus tard.
Pour l'avenir googlers:
Ma solution à ce problème était de mise à niveau
react
etreact-dom
à leurs versions les plus récentes sur NPM. Apparemment, j'ai été à l'importation d'un Composant à l'aide de la nouveau fragment de la syntaxe et il s'était cassé dans mon ancienne version de Réagir.Ce qui manque pour moi a été j'ai été en utilisant
au lieu ou la réponse est correcte devrait être :
Bien sûr, vous avez besoin d'ajouter des mnp paquet réagir-routeur-dom:
Cette question m'est venue quand j'ai eu une mauvaise référence dans mon render/instruction de retour. (point à un non-existence de la classe).
Vérifiez également votre retour code d'instruction pour de mauvaises références.
Dans de simples mots, en quelque sorte, la suite se passe:
Il n'est pas nécessairement liée à une mauvaise importation ou à l'exportation:
Vous devez être conscient de
named export
etdefault export
. Voir Quand devrais-je utiliser des accolades pour ES6 d'importation?Dans mon cas, je l'ai corrigé en changeant de
à
Dans mon cas, l'ordre dans lequel vous créez le composant et le rendu, compte. J'ai été rendu le composant avant de le créer. La meilleure façon est de créer le composant enfant et le parent de composants et de rendre ensuite le composant parent. Modification de l'ordre fixe le problème pour moi.
Dans mon cas, j'ai juste eu à mettre à niveau à partir
react-router-redux
àreact-router-redux@next
. Je suppose qu'il doit avoir été une sorte de problème de compatibilité.Je commençais à cette erreur, et aucune de ces réponses a été mon cas, ça pourrait aider quelqu'un googler:
J'ai été la définition d'un Proptype mal:
Il devrait être:
VSCode et l'erreur de compilation na pas me donner un bon conseil.
Si vous avez cette erreur lors du test d'un composant, assurez-vous que chaque enfant composant afficher correctement lorsque vous exécutez seul, si l'un de vos enfants composant dépendent des ressources externes à rendre, essayer de s'en moquer avec la blague ou tout autre moqueur lib:
Exemple:
La plupart du temps, cela indique une importation/exportation d'erreur. Mais attention à ne pas seulement assurez-vous que le fichier référencé dans la trace de la pile est bien exporté lui-même, mais aussi que ce fichier est de l'importation de autres composants correctement. Dans mon cas, l'erreur était comme ça:
JS:
MODIFIER
Vous complexifient le processus. Faites simplement ceci :
index.js:
routes.js:
Je viens de passer 30 minutes à essayer de résoudre cette question fondamentale.
Mon problème est que j'étais l'importation de réagir natif éléments
par exemple
import React, { Text, Image, Component } from 'react';
Et d'essayer de les utiliser, ce qui m'a amené à recevoir ce message d'erreur.
Une fois que je change de
<Text>
à<p>
et<Image>
à<img>
tout a fonctionné comme prévu.