Thomas Thomas - 4 days ago 5
Javascript Question

null dereference in React 15.1 on image load

I'm running into a strange error after updating to react 15.1 from react 0.14:


ReactDOMComponentTree.js:105 Uncaught TypeError: Cannot read property '__reactInternalInstance$wzdyscjjtuxtcehaa6ep6tj4i' of null


It appears that a "load" event from an image buried in the page using a data url is causing an event and react walks up the DOM and when it hits the top element react injected it has no parentElement and then tries to access a member on the "null" parentElement

Simplified application (abridged):

class App extends React.Component {
render() {
return <div id="rootcomponent">
...
</div>;
}
}

ReactDOM.render(<App/>, document.getElementById('app'));


Resulting HTML:

<div id="app">
<div id="rootcomponent">
...
</div>
</div>


The element with id "rootelement" has a null parentElement which causes the error. The page otherwise seems to work which is perplexing to me.

Stacktrace:

getClosestInstanceFromNode (ReactDOMComponentTree.js:105)
findParent (ReactEventListener.js:39)
handleTopLevelImpl (ReactEventListener.js:68)
Mixin.perform (Transaction.js:136)
ReactDefaultBatchingStrategy.batchedUpdates (ReactDefaultBat…Strategy.js:63)
batchedUpdates (ReactUpdates.js:98)
ReactEventListener.dispatchEvent (ReactEventListener.js:150)


Thoughts on correcting this? Maybe a react bug?

Answer

I'm a Derp.

I just noticed that my javascript was getting loaded twice. I had also updated the HtmlWebpackPlugin across a major version and it changed some behaviour involving injecting the javascript. So it was in my template and the plugin was also injecting it.

After removing the line from the template so the JavaScript is loaded once, everything is fine.

That's what I get for updating libraries at 5pm.

Comments