React 13.3 with browserify: onTouchTap still not firing

[super-cache-money]

I'd love to use this in my isomorphic app, but I'm failing to integrate this.

When I specify onTouchTap handlers to my components, they simply don't fire. So, for example, to use material-ui, I've had to replace all onTouchTap's with onClick's.

I'll give some info about the context in which I'm trying to inject this - maybe some of it will be useful:

I'm using server side rendering, and bundling all of the components for use in the browser using browserify. So that I can use a cdn and to reduce the size of my bundle, I don't just bundle in the server version of react from node_modules. I use browserify-shim to achieve this. It essentially substitutes all require('react')'s with window.React in the browser bundle.

What could be the issue here?

[agereaude]

Same thing here with Webpack. Also trying to use material-ui (but not isomorphic). Firefox's inspector doesn't show any events bound to the DOM elements.

[maddie927]

Same here. I was on React 0.13.2 and react-tap-event-plugin 0.1.6 and it was working fine. Updating to 0.13.3 and 0.1.7 broke all onTouchTaps. No errors or warnings. I'm also using a cdn for React, webpack for the rest of the browser bundle, in case that's relevant.

[wildseansy]

Same as @spicydonuts here. Love the onTouchTap feature, but seems broken in 0.1.7 + React 0.13.3. Looking at the source, I think this is really boils down to just a bug in React 13.3.

[dmitry]

Is there are any alternatives?

[kellyrmilligan]

It's working fine for me with webpack, react 13.3, and 1.7

[brucedonovan]

Hi all, newbie here - so apologise if this is off topic, not related to this bug or something stupidly simple that everyone has already done. I had this issue. I was using react 13.3, plugin 0.1.7 and a 'copy-pasted' gulpfile. Turns out my dev version wasn't integrating the plugin properly because it was using external resources in the development build. It all worked swimmingly after commenting out the line from gulpfile.js:

(options.development ? dependencies : []).forEach(function (dep) { appBundler.external(dep); });

This may or may not be related to this bug, but hopefully it will help some other newbie who also stumbles upon this page.

[ianli-sc]

Same as @spicydonuts here. Any workaround solution?

update ok, I found the reason. as @brucedonovan said, this plugin require some script from react.

1. If you built your project with gulp & browserify, and didn't use var React = require('react/addons'); or var React = require('react'); in the main file (the require of bundle) for build, instead, just use <script> label to import react.js in the page（for me，I just want my self-defined components bean build separated from react.js it self）. this compile of browserify will give no error & warning, but the onTouchTap not firing. The right way of using this plugin is define the dependencies of react & react-tap-event-plugin in your file of package.json and write var React = require('react'); and var injectTapEventPlugin = require("./components/base/InjectTapEventPlugin"); injectTapEventPlugin(); in your main file.
2. DO NOT forget the var before var injectTapEventPlugin = require("./components/base/InjectTapEventPlugin");......

[christopherL91]

Any updates?

[guirong]

if u use webpack and set react as a external lib like this, u may run into this issue.

 externals:{
       'react': 'React'
 }

a solution is use webpack build react and InjectTapEventPlugin.

this problem may be caused by the requires like require('react/lib/EventPluginHub') in InjectTapEventPlugin 。 when u set react as a external lib, webpack won't build react into the bundle. but as InjectTapEventPlugin require some react sub files, webpack don't know these files are external，as a result it build these files into the bundle. so when InjectTapEventPlugin run and register tap event to react, it register into a standalone react env and tap event can't fire

[s0meone]

I have no experience with webpack, but maybe you can use the latest version of the plugin. It now supports React 0.14. I've also included a demo project which explains how to build a version of React with the tap event plugin included. Maybe you could build a version of React using the demo instructions and include that file in your webpack config?

[Ganonside]

Its not a problem with webpack, but rather a problem with the fact the injectTapEventPlugin function is hardcoded to look for the EventPluginHub file in the node modules which is a different instance of React than the one being used (if you are using an external instance). Unforunately I can't see a way to fix this because there is no way to inject an event plugin into a distributable build of react (v0.13.3) as far as I can tell.

[AliciaWamsley]

@kellyrmilligan do you have a repo or can you point us to a repo where this is working with react in the webpack externals, react 13.3, and 1.7?

[hartmamt]

Here is how I'm currently patching react with this plugin. I'd love to have the plugin itself address this issue though. https://github.com/hartmamt/react-with-tap-events

[genyded]

Not sure why this closed... this is a royal PAIN!!! Patching does not work IF YOU ARE USING AN EXTERNAL REACT. And some people do not have a choice.

[hartmamt]

We use the version patched version of react I linked above as an external, we haven't had any issues...but I agree it is a pain and we have to maintain a patched version for whatever react release we are using.

[nsantini]

I was having the same issue with my attempt at an isomorphic app. But I got it solved!

The versions Im using are (from my package.json): "material-ui": "^0.14.4", "react": "^0.14.3", "react-dom": "^0.14.3", "react-tap-event-plugin": "^0.2.2"

I had issues when using version 1.0.0 of react-tap-event-plugin. When I downgraded to ^0.2.2 everything worked as expected.

[ghost]

@nsantini , Thanx for idea!!!!

Downgraded to [email protected] was the solution for me!

First remove react-tap-event-plugin from your dependensies: npm uninstall -D(or -S, depens on what you was using) react-tap-event-plugin

than install target version: npm install -D [email protected]

if you want check what versions are available: npm view react-tap-event-plugin versions

[nswarr]

Massive thanks to @hartmamt for react-with-tap-events. Generating my own react with addons and the tap events fixed it. Just forked and updated for react 15.3.1.

https://github.com/nswarr/react-with-tap-events

[mkaatman]

@nswarr Thank you for taking the time to put that together. You've solved a painful headache for us.

[swenyang]

For react >= 15.4 tap event plugin relies on react-dom. I wrote a build-react-with-tap-event for building standalone react and react-dom.