Preact: React-Native-Web support

Created on 3 Aug 2019  Â·  3Comments  Â·  Source: preactjs/preact

Tried using Preact X with react-native-web, but got this error:

react-dom-unstable-native-dependencies.development.js:1700 Uncaught TypeError: Cannot read property 'Events' of undefined
    at react-dom-unstable-native-dependencies.development.js:1700

> 1700 | var _ReactDOM$__SECRET_IN = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Events;

This is because rnw makes references to unstable-native-dependencies. It seems to use 3 items from this file: injectEventPluginsByName, ResponderEventPlugin and ResponderTouchHistoryStore.

Is it possible to make this work or planned to support this use case?

Old related issue: https://github.com/necolas/react-native-web/issues/330


_Here's my project with the branch preact: https://github.com/devhubapp/devhub/tree/preact You can clone and run yarn && yarn dev:web if you wanna try._

Most helpful comment

I wrote a plugin to implement the Gesture Responder System for preact and react-native-web, feel free trying it. https://github.com/duxiaofeng-github/preact-responder-event-plugin

All 3 comments

The event responder APIs is react's latest version of their own event system. One of Preact's main goals is to use the native DOM event system instead. It's very unlikely that we'll add support for such a system and won't support react-native or derived projects like react-native-web any time soon. We're mainly focused on supporting the web directly without intermediate abstractions :slightly_smiling_face:

I wrote a plugin to implement the Gesture Responder System for preact and react-native-web, feel free trying it. https://github.com/duxiaofeng-github/preact-responder-event-plugin

I wrote a plugin to implement the Gesture Responder System for preact and react-native-web, feel free trying it. https://github.com/duxiaofeng-github/preact-responder-event-plugin

Thanks for this. To assist people who are encountering errors while using Webpack to build react-native-web projects using Preact X, @duxiaofeng-github 's plugin fixes this error:

ERROR in ./node_modules/react-native-web/dist/exports/createElement/index.js
Module not found: Error: Can't resolve 'react-dom/unstable-native-dependencies' in '/home/austinjp/preact-native-test/node_modules/react-native-web/dist/exports/createElement'
 @ ./node_modules/react-native-web/dist/exports/createElement/index.js 12:0-82 18:2-26
 @ ./node_modules/react-native-web/dist/index.js
 @ ./src/index.js

ERROR in ./node_modules/react-native-web/dist/modules/ResponderEventPlugin/index.js
Module not found: Error: Can't resolve 'react-dom/unstable-native-dependencies' in '/home/austinjp/preact-native-test/node_modules/react-native-web/dist/modules/ResponderEventPlugin'
 @ ./node_modules/react-native-web/dist/modules/ResponderEventPlugin/index.js 11:0-88 12:27-61 13:33-67
 @ ./node_modules/react-native-web/dist/exports/createElement/index.js
 @ ./node_modules/react-native-web/dist/index.js
 @ ./src/index.js

Be sure to add the alias as described in the "Usage" section of the docs:

https://www.npmjs.com/package/preact-responder-event-plugin

Hopefully this will add a little Google-juice for people like me who are new to RNW and stumbling on this error.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

youngwind picture youngwind  Â·  3Comments

nopantsmonkey picture nopantsmonkey  Â·  3Comments

philipwalton picture philipwalton  Â·  3Comments

k15a picture k15a  Â·  3Comments

matuscongrady picture matuscongrady  Â·  3Comments