Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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         }       ]     ]   }, } 
like image 409
Matthew Herbst Avatar asked Apr 22 '15 01:04

Matthew Herbst


1 Answers

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

like image 81
Matthew Herbst Avatar answered Sep 18 '22 20:09

Matthew Herbst