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