Der Versuch, React-Router (v4.0.0) und React-Hot-Loader (3.0.0-Beta.6) zum Spielen zu bringen, zeigt jedoch den folgenden Fehler in der Browserkonsole an:
Warnung: React.createElement: Typ ist ungültig - erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse / Funktion (für zusammengesetzte Komponenten), hat aber: undefiniert. Sie haben wahrscheinlich vergessen, Ihre Komponente aus der Datei zu exportieren, in der sie definiert ist.
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() );
route.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;
reactjs
react-router
react-hot-loader
JoeTidee
quelle
quelle
component
Eigenschaft anstelle von verwendenrender
, da das Paket die spätere Version nicht unterstützt. Sehen Sie mehr auf GitHub .Antworten:
Meistens liegt dies an einem falschen Export / Import.
Häufiger Fehler:
Mögliche Option:
Es gibt einige Möglichkeiten, wie es falsch sein könnte, aber dieser Fehler ist jedes Mal in 60% der Fälle auf eine Nichtübereinstimmung zwischen Import und Export zurückzuführen.
Bearbeiten
In der Regel sollten Sie eine Stapelverfolgung erhalten, die einen ungefähren Ort angibt, an dem der Fehler auftritt. Dies folgt in der Regel direkt nach der Nachricht, die Sie in Ihrer ursprünglichen Frage haben.
Wenn es nicht angezeigt wird, lohnt es sich möglicherweise zu untersuchen, warum (es kann sich um eine Build-Einstellung handeln, die Sie vermissen). Unabhängig davon, wenn dies nicht angezeigt wird, besteht die einzige Vorgehensweise darin, einzugrenzen, wo der Export / Import fehlschlägt.
Leider besteht die einzige Möglichkeit, dies ohne Stacktrace zu tun, darin, jedes Modul / Submodul manuell zu entfernen, bis Sie den Fehler nicht mehr erhalten, und sich dann den Stapel wieder hochzuarbeiten.
Bearbeiten 2
Über Kommentare war es in der Tat ein Importproblem, insbesondere das Importieren eines Moduls, das nicht existierte
quelle
<IndexRoute component={Products} />
Ich habe auch diesen Fehler bekommen.
Ich habe verwendet:
import BrowserRouter from 'react-router-dom';
Fix tat dies stattdessen:
import { BrowserRouter } from 'react-router-dom';
quelle
Versuche dies
in Ihrer App.js.
quelle
Sie müssen sich dessen bewusst sein
named export
unddefault export
. Siehe Wann sollte ich geschweifte Klammern für den ES6-Import verwenden?In meinem Fall habe ich das Problem behoben, indem ich von gewechselt habe
zu
quelle
Ich hatte dieses Problem, als ich eine CSS-Datei zum selben Ordner wie die Komponentendatei hinzufügte.
Meine Importanweisung war:
Das war in Ordnung, wenn es nur eine einzige Datei gab, MyComponent.jsx. (Ich habe dieses Format in einem Beispiel gesehen und ausprobiert und dann vergessen, dass ich es getan habe.)
Wenn ich MyComponent.scss zum selben Ordner hinzufügte, schlug der Import fehl. Möglicherweise hat JavaScript stattdessen die .scss-Datei geladen, sodass kein Fehler aufgetreten ist.
Mein Fazit: Geben Sie immer die Dateierweiterung an, auch wenn es nur eine Datei gibt, falls Sie später eine weitere hinzufügen.
quelle
Für zukünftige Googler:
Meine Lösung für dieses Problem bestand darin, ein Upgrade
react
undreact-dom
die neuesten Versionen auf NPM durchzuführen. Anscheinend habe ich eine Komponente importiert, die die neue Fragmentsyntax verwendet und in meiner älteren Version von React fehlerhaft war.quelle
Dieses Problem ist mir aufgetreten, als ich in meiner Render- / Return-Anweisung eine schlechte Referenz hatte. (Zeigen Sie auf eine nicht vorhandene Klasse). Überprüfen Sie auch Ihren Rückkehranweisungscode auf fehlerhafte Referenzen.
quelle
Meistens weist dies auf einen Import- / Exportfehler hin. Achten Sie jedoch nicht nur darauf, dass die referenzierte Datei im Stack-Trace selbst gut exportiert wird, sondern auch darauf, dass diese Datei andere Komponenten korrekt importiert . In meinem Fall war der Fehler wie folgt:
quelle
Ich denke, das Wichtigste bei der Fehlerbehebung ist, dass er sich manifestiert, wenn Sie versuchen, eine nicht vorhandene Komponente zu instanziieren. Diese Komponente muss nicht importiert werden. In meinem Fall habe ich Komponenten als Eigenschaften übergeben. Ich habe vergessen, einen der Aufrufe zu aktualisieren, um die Komponente nach einigen Umgestaltungen ordnungsgemäß zu übergeben. Da JS nicht statisch typisiert ist, wurde mein Fehler leider nicht abgefangen, und es dauerte einige Zeit, um herauszufinden, was geschah.
Um diesen Fehler zu beheben, überprüfen Sie die Komponente, bevor Sie sie rendern, um sicherzustellen, dass es sich um den erwarteten Komponententyp handelt.
quelle
render={props => <Component {...props} />}
zucomponent={Component}
.Mir fehlte ein Reaktionsfragment :
Der obige Code löst den obigen Fehler aus. Aber das behebt es:
quelle
yarn add react-collapsing-table
) hinzugefügt habe . Ich habe es geschafft, zwischen dieser Warnung (die zu einem Hydratationsfehler führte) und einem 'Fenster ist nicht definiert' zu wechseln, das im kompilierten Modul für<div>...</div>
import module from 'module-name'
verwendenrequire(module-name).default
)Was mir fehlte, war, dass ich benutzte
stattdessen oder richtige Antwort sollte sein:
Natürlich müssen Sie das npm-Paket react-router-dom hinzufügen :
quelle
In meinem Fall habe ich vergessen, meine (neuen) Elemente, die vom Render aufgerufen wurden, in die Datei index.js zu importieren und zu exportieren.
quelle
Array von Komponenten
Ein häufiger Weg, um diesen Fehler zu erhalten, ist die Verwendung eines Arrays von Komponenten mit einem Positionsindex , mit dem die zu rendernde Komponente aus dem Array ausgewählt wird. Ich habe so einen Code oft gesehen:
Dies ist kein notwendiger fehlerhafter Code, aber wenn Sie ihn mit einem falschen Index aufrufen (z. B.
-1
oder3
in diesem Fall), wird dieToRender
Komponenteundefined
denReact.createElement: type is invalid...
Fehler auslösen:Eine rationale Lösung
Sie sollten sich und Ihre Kollegen mit einem expliziteren Ansatz vor diesem schwer zu debuggenden Code schützen , magische Zahlen vermeiden und PropTypes verwenden:
Und Ihr Code sieht folgendermaßen aus:
Vorteile dieses Ansatzes
1
steht für Adresse, 2 steht für ...)quelle
In meinem Fall war die Reihenfolge wichtig, in der Sie die Komponente erstellen und rendern. Ich habe die Komponente gerendert, bevor ich sie erstellt habe. Am besten erstellen Sie die untergeordnete Komponente und dann die übergeordneten Komponenten und rendern dann die übergeordnete Komponente. Das Ändern der Reihenfolge hat das Problem für mich behoben.
quelle
In meinem Fall musste ich nur ein Upgrade von
react-router-redux
auf durchführenreact-router-redux@next
. Ich gehe davon aus, dass es sich um ein Kompatibilitätsproblem handelt.quelle
In einfachen Worten, irgendwie passiert Folgendes:
Es muss nicht unbedingt mit einem falschen Import oder Export zusammenhängen:
quelle
Wenn beim Testen einer Komponente dieser Fehler auftritt, stellen Sie sicher, dass jede untergeordnete Komponente korrekt ausgeführt wird, wenn sie alleine ausgeführt wird. Wenn eine Ihrer untergeordneten Komponenten von externen Ressourcen zum Rendern abhängt, versuchen Sie, sie mit einem Scherz oder einer anderen verspottenden Bibliothek zu verspotten:
Beispiel:
quelle
In meinem Fall ist der Fehler beim Versuch aufgetreten, ContextApi zu verwenden. Ich habe fälschlicherweise verwendet:
Aber es sollte definiert worden sein als:
Ich poste es hier, damit zukünftige Besucher, die an einem so dummen Fehler hängen bleiben, es hilfreich finden, stundenlange Kopfschmerzen zu vermeiden, da dies nicht durch falschen Import / Export verursacht wird.
quelle
Auch die zirkuläre Abhängigkeit ist einer der Gründe dafür. [allgemein]
quelle
Dies ist ein Fehler, der in gewisser Weise behoben werden musste. Wie schon oft gesagt, kann ein unsachgemäßer Import / Export diesen Fehler verursachen, aber überraschenderweise habe ich diesen Fehler durch einen kleinen Fehler in
react-router-dom authentication setup
meinem Fall erhalten:FALSCHES SETUP:
RICHTIGE EINSTELLUNG:
Der einzige Unterschied war, dass ich das
token
in der dekonstruiertePrivateRoute component
. Durch die Art und Weise wird das Token aus bekommenlocalstorage
wie dieseconst token = localStorage.getItem("authUser");
so , wenn sie nicht da ist weiß , dass ich der Benutzer nicht authentifiziert ist. Dies kann auch diesen Fehler verursachen.quelle
Es ist wirklich ganz einfach. Ich habe dieses Problem bekommen, als ich angefangen habe, React zu codieren, und das Problem ist fast immer, weil der Import:
Sie können dies zerstören, da react lib eine Eigenschaft als Memo hat, aber Sie können so etwas nicht zerstören
weil es kein Objekt ist.
Ich hoffe es hilft!
quelle
Das Problem wurde für mich behoben
Fehlercode:
Fix
quelle
Dies ist kein direktes Problem im Zusammenhang mit dem Import / Export. In meinem Fall habe ich ein untergeordnetes Element in einem übergeordneten Element gerendert und das untergeordnete Element verfügt über ein jsx-Element / Tag, das verwendet, aber nicht importiert wird. Ich habe es importiert und verwendet, dann wurde das Problem behoben. Das Problem lag also in jsx-Elementen, die sich im untergeordneten Element befinden, NICHT im Export des untergeordneten Elements selbst.
quelle
Ich habe gerade 30 Minuten damit verbracht, dieses grundlegende Problem zu lösen.
Mein Problem war, dass ich reaktive native Elemente importierte
z.B
import React, { Text, Image, Component } from 'react';
Und ich habe versucht, sie zu verwenden, was dazu führte, dass ich diesen Fehler erhielt.
Sobald ich von Schalter
<Text>
zu<p>
und<Image>
auf<img>
alles funktioniert wie erwartet.quelle
Ich habe diesen Fehler erhalten und keine der Antworten war mein Fall. Es könnte jemandem helfen, zu googeln:
Ich habe einen falschen Proptyp definiert:
Es sollte sein:
VSCode und der Kompilierungsfehler gaben mir keinen korrekten Hinweis.
quelle
BEARBEITEN
Sie komplexieren den Prozess. Mach das einfach:
index.js:
route.js:
quelle