React.js component within Polymer element: errors on every mouse/wheel/key event

Question!

Polymer 0.1.1 and React.js 0.8.0.

Reduced case: http://jsbin.com/usIZuLo/3 giving errors like this on every mouse/wheel/key event:

"TypeError: Cannot set property target of #<v> which has only a getter
  at b.<anonymous> (http://cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react.js:7794:28)
  at t (http://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.1/platform.js:29:26363)
  at s (http://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.1/platform.js:29:25903)
  at p (http://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.1/platform.js:29:25456)
  at HTMLDocument.o (http://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.1/platform.js:29:25217)" 
    events.js:328

It looks like Polymer's events.js are clashing with React's synthetic events.

The error stack ends here (react.js:7794):

  // TODO: Remove when synthetic events are ready, this is for IE<9.
  if (nativeEvent.srcElement &&
      nativeEvent.srcElement !== nativeEvent.target) {
    nativeEvent.target = nativeEvent.srcElement;
  }

The problem is probably that nativeEvent is actually wrapped by Polymer. According to the // TODO: note, this might not be an issue in future versions of React.

By : forresto


Answers

This isn't in a React release yet, but that code was removed two months ago:

https://github.com/facebook/react/commit/8529f1b05368837e2b0ca695f0866e33f8fc9b35

If you build a copy of React off of the current master (npm install; grunt build), you shouldn't see the error any more.



This video can help you solving your question :)
By: admin