Izzimach/react-pixi

react-pixi breaks in React versions greater than 15.0.2

Closed this issue · 4 comments

ipd commented

Description

Upgrading our application to use React 15.1.0 or 15.2.1 and react-pixi is broken on line 189 of ReactPIXI.js.

We are getting react-pixi-commonjs.js:272 Uncaught TypeError: prevChild.getNativeNode is not a function

Which I believe matches this line: https://github.com/Izzimach/react-pixi/blob/master/src/ReactPIXI.js#L189. (It's the only place in the react-pixi codebase where we do prevChild.getNativeNode).

Which is inside the moveChild function in the DisplayObjectContainerMixin. We aren't calling this function directly in our codebase. But it gets called from the React lifecycle event componentDidUpdate.

Looks like react-pixi is overriding the updateChildren implementation in ReactMultiChild.js.

Which calls _update_children in ReactMultiChild.js, which in turn calls moveChild function, see: https://github.com/facebook/react/blob/v15.2.1/src/renderers/shared/stack/reconciler/ReactMultiChild.js#L368

It does not look like ReactMultiChild code has changed in any way with the newer releases (15.1, 15.2).

Stack trace:

react-pixi-commonjs.js:272 Uncaught TypeError: prevChild.getNativeNode is not a function

moveChild @ react-pixi-commonjs.js:272
_updateChildren @ ReactMultiChild.js?c87d*:334
updateChildren @ react-pixi-commonjs.js:306
receiveComponent @ react-pixi-commonjs.js:473
receiveComponent @ ReactReconciler.js?6bfa*:131
newReceiveComponent @ react-pixi-commonjs.js:2052
updateChildren @ ReactChildReconciler.js?ff46*:95
_reconcilerUpdateChildren @ ReactMultiChild.js?c87d*:219
_updateChildren @ ReactMultiChild.js?c87d*:316
updateChildren @ react-pixi-commonjs.js:306
perform @ Transaction.js?6dff*:139
PIXIStage_componentDidUpdate @ react-pixi-commonjs.js:422
invokeComponentDidUpdateWithTimer @ ReactCompositeComponent.js?cd59*:66
notifyAll @ CallbackQueue.js?bea8*:68
close @ ReactReconcileTransaction.js?9178*:82
closeAll @ Transaction.js?6dff*:205
perform @ Transaction.js?6dff*:152
perform @ Transaction.js?6dff*:139
perform @ ReactUpdates.js?ce09*:91
flushBatchedUpdates @ ReactUpdates.js?ce09*:174
close @ ReactUpdates.js?ce09*:49
closeAll @ Transaction.js?6dff*:205
perform @ Transaction.js?6dff*:152
perform @ ReactUpdates.js?ce09*:91
flushBatchedUpdates @ ReactUpdates.js?ce09*:174
closeAll @ Transaction.js?6dff*:205
perform @ Transaction.js?6dff*:152
batchedUpdates @ ReactDefaultBatchingStrategy.js?ef70*:64
batchedUpdates @ ReactUpdates.js?ce09*:99
dispatchEvent @ ReactEventListener.js?2365*:151

Possibly the same cause as Izzimach/react-three-legacy#82

ipd commented

@Izzimach do you have a fix in mind?

Should be the same as for react-three, but I won't be near a computer to fix it for a few more days.