webentwicklung-frage-antwort-db.com.de

TypeError bei Verwendung von React: Die Eigenschaft 'firstChild' von undefined kann nicht gelesen werden

Bei der Verwendung von React-Bibliotheken wie React-Router erhalte ich manchmal diese Fehlermeldung:

Nicht abgerufener TypeError: Die Eigenschaft 'firstChild' von undefined kann nicht gelesen werden
/~/react-router/~/react/lib/ReactMount.js?:606

Wie kann ich das beheben?

26
Dan Abramov

Dieser Fehler wird im Allgemeinen durch zwei Versionen von React verursacht, die neben geladen werden.

Wenn Sie beispielsweise ein Paket npm install benötigen, das eine andere React-Version benötigt und es in dependencies anstelle von peerDependencies ablegt, wird möglicherweise ein separates React in node_modules/<some library using React>/node_modules/react installiert.

Zwei verschiedene Reaktionen spielen (zumindest noch) nicht gut zusammen.

Um dies zu beheben, löschen Sie einfach node_modules/<some library using React>/node_modules/react.
Wenn Sie eine Bibliothek sehen, die React in dependencies anstelle von peerDependencies einfügt, legen Sie ein Problem ab.

63
Dan Abramov

Falls jemand dieses Problem hat und npm linked zwei Module abhängig von reagieren hat, habe ich eine Lösung gefunden ...

Nehmen wir an, Sie haben Eltern, abhängig von Reaktion, und Kind, abhängig von Reaktion. Wenn Sie das tun:

cd ../childnpm linkcd ../parentnpm link child

Das verursacht dieses Problem, da Eltern und Kind jeweils ihre eigene Instanz von React laden.

Um dies zu beheben, gehen Sie wie folgt vor:

cd parentcd node_modules/reactnpm linkcd ../../../childnpm link react

Dadurch wird sichergestellt, dass Ihr übergeordnetes Projekt die Reaktionsabhängigkeit bereitstellt, auch wenn eine Verknüpfung besteht. Auf diese Weise würde npm die Abhängigkeit auflösen, wenn Sie die Verknüpfung nicht mehr herstellen.

10
Tom

Die inkonsistente Verwendung von require('react') und require('React') führt ebenfalls zu diesem Problem, auch wenn Sie nur eine Version von React haben.

https://www.npmjs.com/package/gulp-browserify hatte dieses Problem nicht. Nachdem ich aufgehört hatte, gulp-browserify zu verwenden und zu watchify + browserify zu wechseln, begann Uncaught TypeError: Cannot read property 'firstChild' of undefined zu passieren.

4
Luqmaan

Es scheint mir, dass peerDependencies keine Traktion bekommt. Siehe https://github.com/npm/npm/issues/5080#issuecomment-40545599

Ich behalte React-Date-Picker (und andere React-Module) bei, und was ich bis jetzt getan habe, ist die React mit dem Caret, z Beispiel ^ 0.12.0.

Außerdem verwende ich bei der Erstellung aller verketteten Dateien für die Verwendung außerhalb des npm-Ökosystems das Webpack mit externals: { 'react': 'React'}, das nach dem globalen var React sucht.

3
Radu Brehar

Wenn dieser Absturz während des serverseitigen Renderns auftritt und keine dieser Antworten das Problem ist, haben Sie hier die wahrscheinlichste Ursache:

Etwas asynchron machen (setTimeout, AJAX usw.) in KomponenteWillMount. Da componentWillMount auf dem Server aufgerufen wird, wird diese setTimeout/-Anforderung weiterhin ausgelöst. Wenn Sie in diesem CallbackStatus setzen, wird der obige Fehler verursacht.

0

Für mich bestand das Problem darin, dass ich einen <Link> vom React-Router in einem <NavItem> von der reave-bootstrap verwendete. 

0
ameensol