React-native-web: Error with createAnimatedComponent after React and React-DOM upgrade to 16.10.1

Created on 30 Sep 2019  路  4Comments  路  Source: necolas/react-native-web

The problem
https://codesandbox.io/s/goofy-paper-i3kux
In the above sandbox, I create an animated component out of TouchableOpacity.
Until React 16.9.0, everything works fine. But after the recent 16.10.x upgrade, I am getting two console errors on hovering into the page on Chrome.

Uncaught TypeError: Cannot read property 'type' of null
    at Object.ResponderEventPlugin.extractEvents (index.js:66)
    at extractPluginEvents (react-dom.development.js:901)
    at runExtractedPluginEventsInBatch (react-dom.development.js:913)
    at handleTopLevel (react-dom.development.js:5848)
    at batchedEventUpdates$1 (react-dom.development.js:24346)
    at batchedEventUpdates (react-dom.development.js:1463)
    at dispatchEventForPluginEventSystem (react-dom.development.js:5943)
    at attemptToDispatchEvent (react-dom.development.js:6059)
    at dispatchEvent (react-dom.development.js:5963)
    at dispatchUserBlockingUpdate (react-dom.development.js:5933)
Uncaught TypeError: Cannot read property 'forEach' of undefined
    at Object.recordTouchTrack (react-dom-unstable-native-dependencies.development.js:1186)
    at Object.extractEvents (react-dom-unstable-native-dependencies.development.js:1693)
    at Object.ResponderEventPlugin.extractEvents (index.js:86)
    at extractPluginEvents (react-dom.development.js:901)
    at runExtractedPluginEventsInBatch (react-dom.development.js:913)
    at handleTopLevel (react-dom.development.js:5848)
    at batchedEventUpdates$1 (react-dom.development.js:24346)
    at batchedEventUpdates (react-dom.development.js:1463)
    at dispatchEventForPluginEventSystem (react-dom.development.js:5943)
    at attemptToDispatchEvent (react-dom.development.js:6059)
    at dispatchEvent (react-dom.development.js:5963)
    at dispatchUserBlockingUpdate (react-dom.development.js:5933)

On Firefox, I get:

TypeError: nativeEvent.changedTouches is undefined116 vendor-456a9552d8d9dd69d20d.chunk.js line 6248 > eval:1186:7
    React 2
        recordTouchTrack
        extractEvents
    extractEvents index.js:77
    React 9
        extractPluginEvents
        runExtractedPluginEventsInBatch
        handleTopLevel
        batchedEventUpdates$1
        batchedEventUpdates
        dispatchEventForPluginEventSystem
        attemptToDispatchEvent
        dispatchEvent
        dispatchUserBlockingUpdate
    dispatchUserBlockingUpdate self-hosted:1104

Expected behavior
No console error.

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.11.7
  • React (version): 16.10.1
  • Browser: Chrome 77, Firefox 69.0.1

Most helpful comment

All 4 comments

Thanks Andrew

@necolas We are planning to upgrade the react version to 16.10.2. When are you planning to release a build which has this fix incorporated?

The fix is in React

Was this page helpful?
0 / 5 - 0 ratings