Material-ui: React 15.0.2 "Unknown props onTouchTap" warnings

I have the same warning. After some debugging I have discovered that it is raised from this code:

const MenuLeftItem =
  ({text,url}) =>
    <ListItem
      className="menuleft-module-item"
      primaryText={text}
    />

and

<AppBar
   title="Admin Panel"
   iconElementLeft={
      <IconButton>
         <NavigationClose />
      </IconButton>
    }
     onClick={onCollapse}
  />

this is my package.json

"dependencies": {
    "brace": "^0.8.0",
    "d3": "^4.2.2",
    "deepmerge": "^0.2.10",
    "dom-value": "^1.0.1",
    "form-controls": "^1.0.0",
    "form-parse": "^0.1.0",
    "form-urlencoded": "^1.2.1",
    "formsy-material-ui": "^0.5.0",
    "formsy-react": "^0.18.1",
    "is-submittable": "^1.0.0",
    "isomorphic-fetch": "^2.2.1",
    "js-beautify": "^1.5.10",
    "lodash": "^4.14.1",
    "material-ui": "^0.15.4",
    "muicss": "^0.7.3",
    "query-string": "^4.2.2",
    "radium": "^0.18.1",
    "rd3": "^0.7.1",
    "react": "^15.3.1",
    "react-ace": "^3.1.0",
    "react-diff": "0.0.6",
    "react-dimensions": "^2.0.0-alpha1",
    "react-dom": "^15.3.1",
    "react-edit-inline": "^1.0.6",
    "react-graph-vis": "0.0.3",
    "react-hotkeys": "^0.9.0",
    "react-modal": "^1.4.0",
    "react-notification": "^6.1.0",
    "react-redux": "^4.0.6",
    "react-router": "^2.6.1",
    "react-syntax-highlighter": "^2.0.3",
    "react-tap-event-plugin": "^1.0.0",
    "reactable": "^0.14.0",
    "recompose": "^0.20.0",
    "reduce": "^1.0.1",
    "redux": "^3.0.6",
    "redux-actions": "^0.11.0",
    "redux-localstorage": "^0.4.0",
    "redux-saga": "^0.11.0",
    "redux-thunk": "^2.1.0",
    "reduxerit": "^0.4.1",
    "reselect": "^2.0.3",
    "sha1": "^1.1.1",
    "sleep-promise": "^2.0.0",
    "squares": "^0.2.1",
    "uuid": "^2.0.2",
    "vis": "^4.16.1"
  }
}

adding injectTapEventPlugin() did not fix it for me.
i suspect it has something to do with the react HMR plugin

I fixed this problem by switching from using the UMD version of react to webpack-ing everything. I suspect this fixes it because some combo of react-tap-event-plugin and material-ui needs to reach into the private internals of React, and it can't do this from the UMD version. Sigh...

I have same warning for Overlay

Warning: Unknown prop `onTouchTap` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Overlay)
    in Overlay (created by DialogInline)
    in div (created by DialogInline)
    in DialogInline

Also I've read here https://github.com/facebook/react/issues/436 that react-tap-event-plugin possibly may be removed since react 15. Need to investigate.

I'm closing this issue as root issue has been identified by @tavurth. Thanks!

We rely on the react-tap-event-plugin to add the onTouchTap property.
Actually, I'm glad that React added this warning. That's gonna help a lot of people that miss this point from the documentation.

Going forward, we plan to remove this dependency in the next branch.
We use the onClick event as modern mobile devices better support it (no delay).

I was using AppBar and here is the code I am using to fix this as per comments above:

const Header = React.createClass({
handleClick(e){
console.log("reached here::");
},
render(){
injectTapEventPlugin();
return <AppBar title="Some Heading" onTitleTouchTap={this.handleClick()}/>
}
});

export default Header;

For those like me who found this issue, applied the fixes, and had the problem persist: The suggested approach of running injectTapEventPlugin() only works if you are using WebPack; I changed my app over to webpack from browserify, made no other changes to the code, and the error went away.

Could anyone tell me what injectTapEventPlugin() is here for please?

@jakewins: I hade the same issue with browserify. The problem was that I am building a vendor.js and one js file with my whole client code. I found out, that the react-event-tap-plugin have to be bundled within the js file where your react lib is in. This approach fixed my problem with browserify.

Same issue. @vaspoz

Seems to be related to the react-tap-event-plugin going up to ^2.0.0 and react hitting 15.4.0. I am using UMD build and calling injectTapEventPlugin before ReactDOM.render.

Using a non UMD build is unfortunately not an option.

Does anyone have a working UMD version combination of react + react-tap-event-plugin + material-ui?

@oliviertassinari Would it be stable enough to use the next branch which has the more native onClick? I do not care if many things are broken, as long as its semi usable.

Would it be stable enough to use the next branch which has the more native onClick?

@vans163 Here is a 1 month-year-old version of the next branch: http://material-ui-next.azurewebsites.net/. It depends on what you mean by stable.
The API is going to change if we need to. Only some components have been migrated, and often partially. Still, I'm migrating my app to use 100% this branch.

Just in case it helps someone until the new release is ready: I ran into this issue, but once I moved the

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

lines to the component file where I apply <MuiThemeProvider> in the component hierarchy, it started working. (It is also where I do my mapStateToProps for redux but I assume that's irrelevant.) I had previously applied them in the file for a higher component that acted as my wrapping component.

I'm using an ejected webpack from create-app-react.

@rdnewman This works!!

Thank you so much!

thanks all... I had this warning in tests only, and then realised that injectTapEventPlugin() was not called in the course of testing components, only in the full blown app

@rdnewman , thank you! your method works. I put it in my index.js file where it contained the ReactDOM.render method file and it also worked that way. 👍

I had this come up using create-react-app this past week. React came in at 15.4.x and this error happens despite calling injectTapEventPlugin() appropriately. This is discussed in react-tap-event-plugin #85. Manually saving/installing react-tap-event-plugin at 2.0.0 resolved this for me.

hope to help someone who use typescript
I am using material-ui with typescript and had the same issue.
After adding
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
code before ReactDOM.render it throws error.

Uncaught TypeError: react_tap_event_plugin_1.default is not a function

it was solved by changing import style
import * as injectTapEventPlugin from 'react-tap-event-plugin';

Thank god, these days I just have to install the react-tap-event-plugin version 2.0.1 and react 15.4.2, then I went to the file where I render app, and just include these two lines:

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

And that's it 👍

@erick2014 Yup: http://www.material-ui.com/#/get-started/installation

Frustratingly vague issue. Came back after I did some code reorganization in a SSR scenario

For "react": "15.4.2",

Use "react-tap-event-plugin": "^2.0.0" or react-tap-event-plugin": "^2.0.1"

and add this
// Needed for onTouchTap

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

Importing and adding injectTapEventPlugin() solved my issue.

import injectTapEventPlugin from 'react-tap-event-plugin;

componentWillMount(){
    injectTapEventPlugin();
    }

Im using Next.JS

This solution do not work, i have a file tap_events.js it is import each page.

My file tap_events.js:
import injectTapEventPlugin from 'react-tap-event-plugin'
if (typeof window !== 'undefined') injectTapEventPlugin()