javascript - null dereference in React 15.1 on image load - Stack Overflow

admin管理员组

文章数量:1391951

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="rootponent">
      ...
    </div>;
  }
}

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

Resulting HTML:

<div id="app">
  <div id="rootponent">
    ...
  </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?

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="rootponent">
      ...
    </div>;
  }
}

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

Resulting HTML:

<div id="app">
  <div id="rootponent">
    ...
  </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?

• javascript
• reactjs

Share Improve this question Follow asked Jun 1, 2016 at 23:19 ThomasThomas 39411 gold badge44 silver badges1313 bronze badges 3

• I think you need to show more code... what you have in your example works just fine in React 15 – azium Commented Jun 1, 2016 at 23:22
• I'll see about making a unit case. In my debugging it seems to specifically be related to image load events. – Thomas Commented Jun 1, 2016 at 23:33
• Can you show how you're loading the image in your code then? It's in your top level ponent's render method? – azium Commented Jun 1, 2016 at 23:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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.

Isn't it only typo problem? Lack of parenthesis around retuned JSX content.

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

@Thomas He is correct. In my case, I manually populate vendor.js in index.html and in the meantime, I configure webpack to use HtmlWebpackPlugin to inject emitted vendor.js as well.

Obviously, it loads vendor.js twice and throws out the same error.

本文标签： javascriptnull dereference in React 151 on image loadStack Overflow