La mise à niveau de React en 0.13.2 provoque: "TypeError non capturé: impossible de lire la propriété '_currentElement' of null"
J'ai mis à niveau ma version de React de 0.12.2 à 0.13.2 et mon routeur React de 0.12.4 à 0.13.2. En effectuant uniquement ces deux mises à niveau et rien d'autre, le message d'erreur suivant s'affiche lorsque je charge ma page Web/application:
Uncaught TypeError: Cannot read property '_currentElement' of null
Des idées ce qui pourrait causer ceci? J'ai apparemment quelques références à un bogue potentiel de React-Router, mais rien de définitif.
La ligne spécifique à l'origine de l'erreur est la suivante:
ReactRef.detachRefs(internalInstance, internalInstance._currentElement);
Mise à jour 1: Je viens également de mettre à niveau Reactify de la version 1.0.0 à la version 1.1.0 et réagit-routeur-bootstrap (que je n'utilise pas encore) de la version 0.9.1 à la version 0.13.0 sur la base des commentaires de @ BinaryMuse - pas de changement.
Mise à jour 2: Après d’autres tests, j’ai réduit le problème à un problème lié à react-d3 . La désactivation du code react-d3 de mon site provoque la disparition de l'erreur. Je supprime le code de routage pour rendre le message plus concis car je suis maintenant assez confiant que ce n'est pas le fait de réagir-routeur.
Mise à jour 3: Merci à @CoryDanielson d'avoir créé le nouveau tag pour react-d3 .
package.json
{
"author": "me",
"name": "my project",
"description": "my awesome project",
"version": "0.1.0",
"dependencies": {
"bootstrap": "^3.3.2",
"d3": "^3.5.5",
"font-awesome": "^4.3.0",
"jquery": "^2.1.3",
"react": "^0.13.2",
"react-bootstrap": "^0.21.0",
"react-d3": "^0.3.1",
"react-router": "^0.13.2",
"react-router-bootstrap": "~0.13.0",
"reflux": "^0.2.6",
"uuid": "^2.0.1"
},
"devDependencies": {
"browser-sync": "^2.2.2",
"browserify": "^9.0.3",
"del": "^1.1.1",
"envify": "^3.4.0",
"gulp": "^3.8.11",
"gulp-css-url-adjuster": "^0.2.3",
"gulp-jshint": "^1.9.2",
"gulp-minify-css": "^0.5.1",
"gulp-sourcemaps": "^1.5.0",
"gulp-uglify": "^1.1.0",
"gulp-util": "^3.0.4",
"gulp-watch": "^4.1.1",
"reactify": "~1.1.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.0.0",
"watchify": "^2.4.0"
},
"browserify": {
"transform": [
[
"reactify",
{
"es6": false
}
]
]
},
}
J'ai compris cela. Cela revient à un problème avec la fonction render qui se trouve dans react-d3 's's linechart/DataSeries. La fonction vérifie le type de données en échantillonnant le premier élément du tableau de données. Cependant, il ne fournit aucune vérification pour voir si le tableau de données est vide.
J'avais déjà vu des erreurs provenant de LineChart sous la forme de
Uncaught TypeError: Cannot read property 'x' of undefined
Cependant, je les avais ignorés car il s'agissait d'erreurs d'accès et n'arrêtaient pas l'exécution de l'application. Quelque chose dans React doit avoir changé de v0.12.4 à v.0.13.2 de sorte que ces erreurs auparavant inoffensives se cassent maintenant. J'ai lu les notes de version de v0.13.0, v0.13.1 et v.0.13.2, mais je n'ai rien trouvé qui explique pourquoi cette nouvelle erreur se produirait. Je n'ai pas eu le temps de regarder le code diff.
Je n'avais pas connecté les deux erreurs parce que des parties de LineChart lancent toujours Uncaught TypeError: Cannot read property 'x' of undefined. J'ai donc supposé que l'erreur Uncaught TypeError: Cannot read property '_currentElement' of null était une nouvelle erreur causée par la mise à niveau et masquait les erreurs supplémentaires impossible de lire x.
Je vais soumettre une demande de retrait à réagir-d3 sous peu pour corriger ce problème. Merci à tous pour votre aide.
Mise à jour:voici la demande d'extraction
Si cela peut aider, j'ai eu cette même erreur avec le composant DropDownMenu Material-UI en utilisant l'événement incorrect Nom prop (onItemChange au lieu de onChange).
<DropDownMenu menuItems={menuItems} onChange={this._onItemClick}/>
Utiliser le bon nom d’événement pour moi a résolu ce problème.
J'ai eu exactement le même problème avec 0.13.2, cependant, la cause de mon erreur et sa solution étaient un peu différentes:
L'erreur est venue à ma version de npm. J'utilisais npm 2.1.4 depuis la mise à niveau (maintenant à la version 2.8.4) et j'utilisais npm update -g npm. Je pouvais tout faire fonctionner sans toucher mon package.json ni quoi que ce soit d'autre.
Laissez-moi savoir si cela fonctionne pour vous!
Nous avons passé toute la journée à lutter contre ce problème qui s’est avéré dû à des appels console.warn suite à des échecs de validation de React.PropTypes. Une fois que nous avons résolu ces problèmes PropType, IE9 a recommencé à fonctionner. (nos problèmes provenaient de données ayant des valeurs indéfinies au lieu de chaînes et une suggestion d'utiliser l'attribut key sur certains JSX)
HTML Boilerplate a une solution à cela, que tout le monde devrait utiliser: https://github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js#L2-L22
// Avoid `console` errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
Même problème que celui-ci: Pourquoi JavaScript ne fonctionne-t-il qu'après avoir ouvert les outils de développement dans IE une fois?
L'ajout de "babel-polyfill" a résolu le problème dans IE11.