react: TypeError: Cannot read property '_currentElement' of null
From maintainers: if you have this problem, please see the explanation in https://github.com/facebook/react/issues/6895#issuecomment-281405036.
Test case: jsFiddle
The error is in this function, internalInstance is null.
/**
* Releases any resources allocated by `mountComponent`.
*
* @final
* @internal
*/
unmountComponent: function(internalInstance) {
ReactRef.detachRefs(internalInstance, internalInstance._currentElement);
internalInstance.unmountComponent();
}
I managed to “fix” the bug by simply checking if internal state is not null but that requires modifying react. Other mentions of this bug are listed below.
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Reactions: 4
- Comments: 32 (5 by maintainers)
@rossPatton in chrome you can activate
pause on exceptionand track down which component path is breaking.Almost always from rendering code throwing an error and preventing the render from completing.
Tracking down these errors is so killing productivity. I don’t even know which component is causing this. @blairanderson How do I get a proper error message? What do you mean by “force render at the top”? Is there anything I could wrap in a try/catch to get to the cause of the error?
React team can learn a thing or two from Angular team about handling/messaging these kind of errors
This error message usually just mean that
render()of some component threw during the initial mount. If you look above this error message and ignore it, you will see the real error message.I have a project set up with Webpack hot module reload. I can trigger this error (
Uncaught TypeError: Cannot read property '_currentElement' of nullinReactReconciler.js) if I have some invalid code in a component, which triggers a expected exception, then correcting the invalid code, which causes the hot module reload, which seems to trigger this TypeError.Summing up, in my case it’s occurring on every hot module reload which results from correcting a javascript error.
@korakon It doesn’t matter if you rethrow errors, my intended point was that React can internally catch and rethrow errors to avoid the internal state breaking (completely at least) but doesn’t because there are undesirable side-effects in many browsers currently.
AFAIK there is no clean way out of an invariation violation once it has happened. If you have a particularily vulnerable piece of code then wrap that in a try-catch, not the calls to React.
Some invariant violations leaves React in an unstable state at the moment so this is to be expected. AFAIK this is partly because catching and re-throwing errors is a crapshoot in many browsers and may also have significant performance impact on hot code-paths.