Open likethemammal opened 6 years ago
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
Will try it out. The react-primitives on react@16.2.0 also already has react-native-web updated to 0.2.2. Will try updating to the latest to see if it fixes it
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
?
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, react@16.2.0, react-native-web@3.2.0, and react-primitives@4.4.0. 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
It would happen if the responder event plugin wasn't injected
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?
Try using react native web components directly instead
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"?
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
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.
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
Using babel-plugin-react-native-web fixed this for me.
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
On web,
Touchable
errors when react-primitives is bundled with a react component thats then bundled, for instance, as an npm package.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 debuggingdevDependencies
andpeerDependencies
. 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 react@16.2.0 and react@15.4.2. 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 simpleView
andText
for something to click on. On refresh I get the error output aboveDoes 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