TypeError lors de l'utilisation de Réagir: Impossible de lire la propriété 'firstChild' undefined

Parfois, lors de l'utilisation de Réagir bibliothèques, comme réagir-routeur, j'obtiens cette erreur:

Uncaught TypeError: Cannot read property 'firstChild' undefined

/~/réagir-routeur/~/réagir/lib/ReactMount.js?:606

Comment puis-je résoudre ce problème?

InformationsquelleAutor Dan Abramov | 2014-11-26
  1. 64

    Cette erreur est souvent causée par deux versions de Réagir chargé aux côtés.

    Par exemple, si vous npm install un package qui nécessite une autre version Réagir et met en dependencies au lieu de peerDependencies, il pourrait installer un autre de Réagir en node_modules/<some library using React>/node_modules/react.

    Deux différents Réagit de ne pas jouer bien ensemble (du moins pas encore).

    Pour le fixer, il suffit de supprimer node_modules/<some library using React>/node_modules/react.

    Si vous voyez une bibliothèque mettant à Réagir dans dependencies au lieu de peerDependencies, fichier un problème.

    • Il pourrait également se produit lors de l'utilisation de require('react') & require('react/addons') dans des fichiers séparés.
    • J'ai trouvé que ça m'arrive aussi lors de l'essai avec la Plaisanterie. Si j'ai besoin de réagir à l'échelle mondiale, dépend du test il jette à l'erreur. La solution de contournement que j'ai trouvé est d'exiger de réagir à chaque fois à l'intérieur de beforeEach.
    • Êtes-vous sûr de ne pas avoir de doublons de Réagir dans certaines node_modules sous-dossier?
    • Semblable à ce que @Cethy dit, à l'aide de require('react') et require('React') également de se débarrasser de cette erreur.
    • réagir-sélectionnez cette github.com/JedWatson/react-select/blob/master/package.json#L15
    • Fichier un problème avec eux!
    • C'est de la désinformation. Juste cause (double Réagit) mauvaise solution (peerDependencies). Certaines bibliothèques, réagissent-sélectionnez inclus, nécessitent de réagir et ne peut pas fonctionner sans elle, comme une dépendance. La solution est pour les bibliothèques d'être aussi efficace que possible avec leurs dépendances, et de toujours vous assurer que vous êtes, y compris une version de Réagir qui satisfait aux exigences de paquets que vous utilisez.
    • Comment vous proposez-vous de traiter avec les choses de rupture lorsque la nouvelle version de Réagir sort? Au moins par les pairs deps dire si les auteurs pensent que la bibliothèque soit prête. Quelle est la bonne façon de résoudre ce problème sans égal deps?
    • Dans le cas où il aide à quelqu'un d'autre, je suis tombé sur cette question parce que j'ai été, par inadvertance, de tenter de démonter un composant avant un événement click avait fini de bulles. Je l'ai corrigé en ajoutant simplement event.stopPropagation() dans mon gestionnaire de clic.
    • Votre solution a fonctionné pour moi, mais je ne sais pas pourquoi. Pourriez-vous ajouter comme une réponse avec un peu plus d'explications? Je promets de upvote. 🙂

    InformationsquelleAutor Dan Abramov
  2. 10

    Au cas où quelqu'un a ce problème ayant npm linked deux modules en fonction de réagir, j'ai trouvé une solution...

    Disons que vous avez Parent en fonction de Réagir, et de l'Enfant en fonction de réagir. Lorsque vous faites:


    cd ../child
    npm link
    cd ../parent
    npm link child

    Ce sont les causes de ce problème, parce que le parent et l'enfant chaque charge leur propre instance de Réagir.

    Le moyen de résoudre ce problème est comme suit:


    cd parent
    cd node_modules/react
    npm link
    cd ../../../child
    npm link react

    Ce qui garantit que votre projet parent fournitures réagir la dépendance, même lorsqu'elles sont liées, qui est de savoir comment mnp permettrait de résoudre la dépendance lorsque vous êtes déconnecté.

    InformationsquelleAutor Tom
  3. 4

    À l'aide de require('react') et require('React') de façon incohérente des causes de ce problème ainsi, même si vous avez seulement une version de Réagir.

    https://www.npmjs.com/package/gulp-browserify n'ont pas ce problème. Une fois que j'ai arrêté de l'utiliser gulp-browserify et sont passés à watchify+browserify, Uncaught TypeError: Cannot read property 'firstChild' of undefined a commencé.

    InformationsquelleAutor Luqmaan
  4. 3

    Il me semble peerDependencies est de ne pas obtenir de traction. Voir https://github.com/npm/npm/issues/5080#issuecomment-40545599

    Je suis le maintien de réagir-date-picker (et d'autres réagissent modules), et ce que j'ai fait jusqu'à maintenant est de spécifier la Réagir la dépendance à l'aide de l'accent circonflexe, par exemple ^0.12.0.

    Aussi, lorsque vous faites une compilation de tous les fichiers concaténés, pour une utilisation en dehors du mécanisme national de prévention de l'écosystème, je l'utilise avec webpack
    externals: { 'react': 'React'}
    qui ira chercher le mondial var React.

    • C'est une erreur de la même façon, la démocratie est “la pire forme de gouvernement, à l'exception de tous les autres” de l'OMI. Lorsque 0.13 sort, votre plugin installer seulement acceptable, mais il peut être incompatible.
    InformationsquelleAutor Radu Brehar
  5. 0

    Pour moi, le problème est que j'ai été en utilisant un <Link> de réagir-routeur à l'intérieur d'un <NavItem> de réagir-bootstrap.

    • Pourquoi était-ce la question? Et comment avez-vous le résoudre?
    InformationsquelleAutor ameensol
  6. 0

    Si vous rencontrez ce crash pendant que le serveur de rendu côté et aucune de ces réponses sont le problème, ici, c'est la probable:

    De faire quelque chose async (setTimeout, AJAX, etc.) dans componentWillMount. Depuis componentWillMount est appelé sur le serveur, ce setTimeout/demande encore du feu. Si vous setState à l'intérieur de cette fonction de rappel, puis il va la cause de l'erreur ci-dessus.

    InformationsquelleAutor Andrew Rasmussen