[英]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.




  "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": [
          "es6": false

6 个解决方案



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




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.

錯誤出現在我的npm版本中。我使用npm 2.1.4升級(現在是2.8.4),運行npm update -g npm,我可以在不接觸包的情況下完成所有工作。json或其他。

Let me know if that works for you!




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.




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

HTML Boilerplate有一個解決方案,每個人都應該使用: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?




Adding "babel-polyfill" solved the issue for me in IE11




I got this error when my app.jsx file referred to a List component and I forgot to include it with


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



粤ICP备14056181号  © 2014-2021 ITdaan.com