Error when Touchable is bundled

[likethemammal]

On web, Touchable errors when react-primitives is bundled with a react component thats then bundled, for instance, as an npm package.

Warning: Unknown event handler property `onStartShouldSetResponder`

Took me a while to prove to myself that it was an issue with react-primitives. I've written a stripped down example repo that reproduces the issue. Heres a direct link to the hypothetical component that would use react-primitives, its a really simple implementation

Repo with bug reproduced

Screenshot:

I originally thought this had something to do with react-primitives not being up to date with React 16, and react-dom getting angry about it. Spent a lot of time debugging devDependencies and peerDependencies. Also tweaked and trimmed down my webpack config to try to figure out any bundling issue. I've recreated the issue in that repo using react-primitives at [email protected] and [email protected]. It happens in either version. (I used my PR upgrading react-primitives to React 16 for the example at 16.2.0)

The example repo has a small webpack config for the hypothetical component and a separate webpack config for the example dir showcasing the component's usage. All I've done in the hypothetical component is import Touchable and added a simple View and Text for something to click on. On refresh I get the error output above

Does anyone have any idea what the issue is? Is webpack doing something I'm not seeing?

This is preventing me from using react-primitives in several open source components I'd like to write

[necolas]

It's probably because react primitives is using an old version of react native web. You should just use the latter as directed, instead of react primitives, and it will work

[likethemammal]

Will try it out. The react-primitives on [email protected] also already has react-native-web updated to 0.2.2. Will try updating to the latest to see if it fixes it

[likethemammal]

Alright, switched the example repo to using TouchableWithoutFeedback from react-native-web latest. Still getting errors, so I guess the issue originates react-native-web?

Updated example repo

New screenshot using react-native-web's TouchableWithoutFeedback:

@necolas do you recognize where these errors come from? I see mentions in a few issues (https://github.com/necolas/react-native-web/issues/257, https://github.com/necolas/react-native-web/issues/447, etc) of the error, but the suggestion has just been to update to some version. This bug and example repo are using everything on latest, [email protected], [email protected], and [email protected]. So I dont really know where to go from here.

Also, let me know if I should make this into a different issue in react-native-web

[necolas]

It would happen if the responder event plugin wasn't injected

[likethemammal]

Did some reasearch into ResponderEventPlugin. Thanks for the direction!

Found a few discussions in ReactDOM, but it looks like this thread in react-native-web is the last word on the subject as it relates. https://github.com/necolas/react-native-web/issues/739.

Also found your module injecting ResponderEventPlugin. And that led me to discover createElement and the advanced usage guide.

Got the errors to go away importing /modules/injectResponderEventPlugin directly from react-native-web into the example script. But couldnt fix the errors if I imported the injection inside the hypothetical component.

I assumed I should just wrap react-primitive's Touchable with createElement, but I wasnt able to change the error. Even wrapping the hypothetical component with createElement just created the same errors. Its as if the injection doesnt occur if the script the createElement call occurs in is bundled twice.

Again, I was able to get it working by importing injectResponderEventPlugin directly in the example. But this isnt really a solution, as it would mean any app that wants to import the hypothetical component would also have to import the injection script, or use createElement to wrap this component they've installed.

Thoughts?

[necolas]

Try using react native web components directly instead

[likethemammal]

I've done that (above https://github.com/lelandrichardson/react-primitives/issues/99#issuecomment-360030836) with TouchableWithoutFeedback from react-native-web, and still got the errors. Is there something else you mean by "react native web components"?

[necolas]

I don't know. Here's the same example, in a clean environment, running with no problems: https://glitch.com/edit/#!/lying-day?path=src/App/index.js:2:82

[likethemammal]

The error occurs when Touchable is bundled in a component and then that component is bundled again. Your glitch example only has it bundled once. I'll try to recreate in glitch, but that is what my example repo is showing.

[likethemammal]

Recreated the example repo in Glitch, but Glitch hangs trying to serve it. I fixed any errors in the logs, so I'm not sure why its not displaying

https://glitch.com/edit/#!/loud-roof

Since Glitch isnt running, I cant be sure that the issue is reproduced in it. But its just a port of the example repo I created earlier

[gabriel]

Using babel-plugin-react-native-web fixed this for me.

[likethemammal]

Thanks for the suggestion. I theorized in the past few days that this was related to webpack 'tree-shaking' when import is used for side-effects only. That would explain why injectResponderEventPlugin isnt actually run/included when bundled further.

Will try out babel-plugin-react-native-web