TypeError lors de l'utilisation de React: impossible de lire la propriété 'firstChild' de non définie
Parfois, lors de l'utilisation de bibliothèques React, telles que react-router , j'obtiens cette erreur:
Uncaught TypeError: Impossible de lire la propriété 'firstChild' de non définie
/~/react-router/~/react/lib/ReactMount.js?:606
Comment je le répare?
Cette erreur est généralement causée par deux versions de React chargées à côté de .
Par exemple, si vous npm install un package qui requiert une version différente de React et le place dans dependencies au lieu de peerDependencies, il est possible d’installer un React distinct dans node_modules/<some library using React>/node_modules/react.
Deux Reacts différents ne joueront pas bien ensemble (du moins pour le moment).
Pour résoudre ce problème, supprimez simplement node_modules/<some library using React>/node_modules/react.
Si vous voyez une bibliothèque mettre React dans dependencies au lieu de peerDependencies, signalez un problème.
Au cas où quelqu'un aurait ce problème ayant npm linked deux modules en fonction de réagir, j'ai trouvé une solution ...
Supposons que les parents dépendent de React et les enfants en fonction. Quand tu fais:
cd ../childnpm linkcd ../parentnpm link child
Cela cause ce problème, car parent et enfant chargeront chacun leur propre instance de React.
La façon de résoudre ce problème est la suivante:
cd parentcd node_modules/reactnpm linkcd ../../../childnpm link react
Cela garantit que votre projet parent fournit la dépendance de réaction, même lorsqu'elle est liée, ce qui permettra à npm de résoudre la dépendance lorsque vous n'êtes pas lié.
L'utilisation de require('react') et require('React') provoque également ce problème, même si vous ne possédez qu'une seule version de React.
https://www.npmjs.com/package/gulp-browserify n'a pas eu ce problème. Une fois que j'ai arrêté d'utiliser gulp-browserify et que je suis passé à watchify + browserify, Uncaught TypeError: Cannot read property 'firstChild' of undefined a commencé à se produire.
Il me semble que peerDependencies ne gagne pas en popularité. Voir https://github.com/npm/npm/issues/5080#issuecomment-40545599
Je maintiens react-date-picker (et d’autres modules de réaction) et j’ai fait jusqu’à présent de spécifier la dépendance à la réaction à l’aide du caret, par exemple ^ 0.12.0.
En outre, lors de la compilation de tous les fichiers concaténés, pour une utilisation en dehors de l'écosystème npm, j'utilise webpack avec externals: { 'react': 'React'} Qui recherche la variable globale var React.
Si vous rencontrez ce problème lors du rendu côté serveur et qu'aucune de ces réponses ne pose problème, voici le coupable probable:
Faire quelque chose d'async (setTimeout, AJAX, etc.) dans ComponentWillMount. Puisque composantWillMount est appelé sur le serveur, cette requête/setTimeout sera toujours déclenchée. Si vous définissez State dans ce rappel, l'erreur ci-dessus sera générée.
Pour moi, le problème était que j'utilisais un <Link> de react-router dans un <NavItem> de react-bootstrap.