javascript - La actualización de React a 0.13.2 provoca: "UnEught TypeError: no se puede leer la propiedad ''_currentElement'' of null"

d3.js reactjs

Question

Actualicé mi versión de React de 0.12.2 a 0.13.2 y mi React-Router de 0.12.4 a 0.13.2. Al hacer solo esas dos actualizaciones y nada más, ahora obtengo el siguiente error cuando cargo mi página web / aplicación:

Uncaught TypeError: Cannot read property ''_currentElement'' of null

¿Alguna idea de lo que podría estar causando esto? Me parecen algunas referencias a un posible error React-Router, pero nada definitivo.

La línea específica que causa el error es:

ReactRef.detachRefs(internalInstance, internalInstance._currentElement);

Actualización 1: también actualicé reactify de la versión 1.0.0 a la 1.1.0 y react-router-bootstrap (que aún no estoy usando) de 0.9.1 a 0.13.0 basado en los comentarios de @BinaryMuse, sin cambios.

Actualización 2: después de más pruebas, reduje esto a un problema con react-d3 . Deshabilitar el código de reac-d3 de mi sitio hace que el error desaparezca. Estoy eliminando el código de enrutamiento para hacer que la publicación sea más concisa ya que ahora estoy bastante seguro de que el router de reacción no está causando este problema.

Actualización 3: Gracias a @CoryDanielson por crear la nueva etiqueta para react-d3 .

paquete.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
        }
      ]
    ]
  },
}

Answer 1

Agregar "babel-polyfill" resolvió el problema en IE11

Answer 2

Me he dado cuenta de esto. Todo se reduce a un problema con la función de render que se encuentra en el linechart/DataSeries react-d3 . La función verifica el tipo de datos al muestrear el primer elemento de la matriz de datos. Sin embargo, no proporciona ningún control para ver si la matriz de datos está vacía.

Había visto errores provenientes de LineChart antes en forma de

Uncaught TypeError: Cannot read property ''x'' of undefined

Sin embargo, los ignoré porque eran errores de acceso y no impedían que la aplicación se ejecutara. Algo en React debe haber cambiado de v0.12.4 a v.0.13.2 de modo que estos errores anteriormente inofensivos ahora se estén rompiendo. Leí las notas de la versión para v0.13.0, v0.13.1 y v.0.13.2 pero no encontré nada que indique por qué ocurriría este nuevo error. No he tenido tiempo de mirar el código diff.

No había conectado los dos errores porque partes de LineChart todavía arrojan Uncaught TypeError: Cannot read property ''x'' of undefined así que asumí que el Uncaught TypeError: Cannot read property ''_currentElement'' of null error Uncaught TypeError: Cannot read property ''_currentElement'' of null y estaba enmascarando el adicional no puede leer x errores.

Presentaré una solicitud de extracción para reaccionar-d3 en breve para corregir este problema. Gracias por toda tu ayuda.

Actualización: aquí está la solicitud de extracción

Answer 3

Pasé todo el día luchando con este problema y terminó siendo debido a llamadas console.warn de fallas de validación de React.PropTypes. Una vez que solucionamos estos problemas de PropType, IE9 comenzó a funcionar nuevamente. (Nuestros problemas provienen de datos que tienen valores indefinidos en lugar de cadenas, y una sugerencia para usar el atributo clave en algunos JSX)

HTML Boilerplate tiene una solución para esto, que todo el mundo debería usar: 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;
        }
    }
}());

Mismo problema como este: ¿Por qué JavaScript solo funciona después de abrir las herramientas de desarrollador en IE una vez?

Answer 4

Recibí este error cuando mi archivo app.jsx se refería a un componente de la Lista y olvidé incluirlo

var List = require(''./list'');

Answer 5

Si puede ayudar, tuve el mismo error con el componente Material-UI DropDownMenu utilizando el evento malo Name prop (onItemChange en lugar de onChange).

    <DropDownMenu menuItems={menuItems} onChange={this._onItemClick}/>

Usar el nombre correcto para el evento resolvió este problema para mí.

Answer 6

Tuve el mismo problema exacto con 0.13.2, sin embargo, la causa de mi error y mi solución fueron un poco diferentes:

El error vino a mi versión npm. Estaba usando npm 2.1.4 desde la actualización (ahora en 2.8.4) y estoy ejecutando la actualización de npm -g npm Pude hacer que todo funcionara sin tocar mi paquete.json o cualquier otra cosa.

¡Hazme saber si eso funciona para ti!