Upgrading React to 0.13.2 causes: “Uncaught TypeError: Cannot read property '_currentElement' of null”

问题

I upgraded my React version from 0.12.2 to 0.13.2 and my React-Router from 0.12.4 to 0.13.2. Doing just those two upgrades and nothing else, I now get the following error when I load my webpage/app:

Uncaught TypeError: Cannot read property '_currentElement' of null

Any ideas what might be causing this? I have seem some references to a potential React-Router bug, but nothing definitive.

The specific line that causes the error is:

ReactRef.detachRefs(internalInstance, internalInstance._currentElement);

Update 1: I also just upgraded reactify from version 1.0.0 to 1.1.0 and react-router-bootstrap (which I'm not actually using yet) from 0.9.1 to 0.13.0 based on @BinaryMuse's comments - no change.

Update 2: After further testing, I have narrowed this down to an issue with react-d3. Disabling the react-d3 code from my site causes the error to go away. I am removing the routing code to make the post more concise since I am now fairly confident that react-router is not causing this issue.

Update 3: Thanks to @CoryDanielson for creating the new tag for 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
        }
      ]
    ]
  },
}

回答1:

I have figured this out. It comes down to a problem with the render function found in react-d3's linechart/DataSeries. The function checks the type of data by sampling the first element of the data array. However, it does not provide any check to see if the data array is empty.

I had seen errors coming from LineChart before in the form of

Uncaught TypeError: Cannot read property 'x' of undefined

However, I had ignored them since they were access errors and were not stopping the app from running. Something in React must have changed from v0.12.4 to v.0.13.2 such that these previously harmless errors are now breaking. I read the release notes for v0.13.0, v0.13.1, and v.0.13.2 but found nothing that states why this new error would occur. I have not had time to look at the code diff.

I had not connected the two errors because parts of LineChart still throw Uncaught TypeError: Cannot read property 'x' of undefined so I just assumed that the Uncaught TypeError: Cannot read property '_currentElement' of null error was a new one caused by the upgrade and was masking the additional cannot read x errors.

I will be submitting a pull-request to react-d3 shortly to correct this problem. Thank you all for your help.

Update: here is the pull-request

回答2:

I had the same exact problem with 0.13.2, however, the cause of my error and solution to it were a bit different:

The error came down to my npm version. I was using npm 2.1.4 since upgrading (now at 2.8.4) and running npm update -g npm I was able to get everything working without touching my package.json or anything else.

Let me know if that works for you!

回答3:

If it can help I had this same error with the Material-UI DropDownMenu component using the bad event Name prop (onItemChange instead of onChange).

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

Using the right event prop name solved this issue for me.

回答4:

Spent all day wrestling with this issue and it ended up being due to console.warn calls from React.PropTypes validation failures. Once we fixed these PropType issues, IE9 started working again. (our issues were from data having undefined values instead of strings, and a suggestion to use the key attribute on some JSX)

HTML Boilerplate has a solution for this, which everybody should use: 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;
        }
    }
}());

Same issue as this: Why does JavaScript only work after opening developer tools in IE once?