React 15.0.2 "Unknown props onTouchTap" warnings #4670

sayanchowdhury · 2016-07-10T11:57:37Z

Even though last release fixed a couple of issues. I am still seeing this two warnings

Warning: Unknown prop `onTouchTap` on <span> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in span (created by EnhancedButton)
    in EnhancedButton (created by ListItem)
    in div (created by ListItem)
    in ListItem (created by ChatMenu)
    in div (created by List)
    in List (created by _class)
    in _class (created by ChatMenu)
    in div (created by Paper)
    in Paper (created by Drawer)
    in div (created by Drawer)
    in Drawer (created by ChatMenu)
    in ChatMenu (created by ChatApp)
    in div (created by ChatApp)
    in ChatApp (created by Chat)
    in MuiThemeProvider (created by Chat)
    in Chat (created by WithWidth)
    in EventListener (created by WithWidth)
    in WithWidth (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by Root)
    in e (created by Root)
    in Provider (created by Root)

Warning: Unknown prop `styles` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Paper)
    in Paper (created by AppBar)
    in AppBar (created by ChatRoom)
    in div (created by ChatRoom)
    in ChatRoom (created by ChatApp)
    in div (created by ChatApp)
    in ChatApp (created by Chat)
    in MuiThemeProvider (created by Chat)
    in Chat (created by WithWidth)
    in EventListener (created by WithWidth)
    in WithWidth (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by Root)
    in e (created by Root)
    in Provider (created by Root)

The text was updated successfully, but these errors were encountered:

sayanchowdhury · 2016-07-10T12:00:36Z

I would like to send a PR but right now I don't know how to test the changes and if those changes fixes the warning ?

tavurth · 2016-07-10T14:44:29Z

Using Yeoman Webpack and react: ^15.2.1

Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by EnhancedButton)
    in EnhancedButton (created by RaisedButton)
    in div (created by Paper)
    in Paper (created by RaisedButton)
    in RaisedButton (created by MyButton)
    in div (created by MyButton)
    in MyButton (created by AppComponent)
    in div (created by AppComponent)
    in MuiThemeProvider (created by AppComponent)
    in AppComponent

From the simple:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

export default class MyButton extends React.Component {

  render() {
    return (
      <div>
        <RaisedButton>
          Hello, world!
        </RaisedButton>

      </div>
    );
  }
}

Packages.json:


{
  ...
  "devDependencies": {
    ...
    "core-js": "^2.0.0",
    "material-ui": "^0.15.2",
    "normalize.css": "^4.0.0",
    "react": "^15.2.1",
    "react-dom": "^15.0.0",
    "react-tap-event-plugin": "^1.0.0"
  }
}

tavurth · 2016-07-10T18:32:50Z

Fixed by adding:

// Needed for onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

To the component.

BlockChange · 2016-07-11T08:32:26Z

I'd like to add: transitionAppearTimeout

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

Only appears in Dialog

Update: Nevermind, that was with react 15.0.0, with 15.2.1 its gone. I guess they forgot a few props.

igl · 2016-07-11T15:50:45Z

I call injectTapEventPlugin() in both client and server and still get plenty of warnings with various elements.

Versions:

"material-ui": "0.15.2",
"react": "15.2.1",
"react-dom": "15.2.1",
"react-tap-event-plugin": "1.0.0",

Some Warnings:

Warning: Unknown prop `onTouchTap` on <label> tag. 
Warning: Unknown props `displayBorder`, `columnNumber`, `hoverable`, `onHover`, `onHoverExit` on <td> tag.

ixrock · 2016-07-19T13:14:55Z

@igl try to call injectTapEventPlugin() before ReactDOM.render

Ghirigoro · 2016-07-24T12:50:37Z

@ixrock: calling injectTapEventPlugin() before ReactDOM.render does not fix the issue (at least not for me)

vaspoz · 2016-07-25T07:46:49Z

@Ghirigoro the same issue =\

vendors.js:20314 Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by EnhancedButton)
    in EnhancedButton (created by RaisedButton)
    in div (created by Paper)
    in Paper (created by RaisedButton)
    in RaisedButton
    in MuiThemeProvider

regardless of using/not using injectTapEventPlugin() before/after render. Any ideas, guys?

azamatsmith · 2016-07-25T17:59:06Z

Added the suggestion by @tavurth and I got rid of the error.
I tried it in the following places with success:

In the component generating the error
routes file
app.js file
file where ReactDOM.render is being called

I settled on placing it in the ReactDOM.render file

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

tathagatbanerjee · 2016-07-27T06:09:53Z

Seeing same error on CardTitle with prop titleStyle...

warning.js:44 Warning: Unknown prop `titleStyle` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by CardTitle)
    in CardTitle (created by GroupAdmin)
    in div (created by Card)
    in div (created by Paper)
    in Paper (created by Card)
    in Card (created by GroupAdmin)
    in span (created by GroupAdmin)
    in GroupAdmin (created by Operations)

Code fragment: <CardTitle title="Group Admin" titleStyle={styles.title}/>

Material UI version: 0.15.2

Thanks so much.

johnstew · 2016-08-07T14:53:27Z

Hi there,

Not sure if mine is related but I get this error when using <Chip>.

Unknown prop labelColor on <div> tag.

abdennour · 2016-08-23T07:48:06Z

The same for me :

Warning: Unknown prop translate on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

And i add :

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

And it does NOT work 👎

jurgob · 2016-08-25T15:06:41Z

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"
  }
}

igl · 2016-08-25T16:05:15Z

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

mattyork · 2016-09-07T03:22:52Z

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...

darkowic · 2016-09-12T12:13:07Z

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 facebook/react#436 that react-tap-event-plugin possibly may be removed since react 15. Need to investigate.

oliviertassinari · 2016-09-17T17:08:55Z

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).

surajadh · 2016-10-10T21:02:13Z

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;

jakewins · 2016-10-20T01:14:41Z

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.

oychao · 2016-11-17T01:16:46Z

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

weiss19ja · 2016-11-18T14:46:50Z

@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.

vans163 · 2016-11-21T15:07:02Z

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.

oliviertassinari · 2016-11-21T21:48:02Z

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.

rdnewman · 2017-01-04T19:11:10Z

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.

GregTheGreek · 2017-01-08T15:09:15Z

@rdnewman This works!!

Thank you so much!

ptim · 2017-01-09T11:05:09Z

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

Lavioli · 2017-01-19T01:14:53Z

@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. 👍

willklein · 2017-02-05T00:20:42Z

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.

grishgrigoryan · 2017-02-06T16:43:32Z

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';

erick2014 · 2017-03-31T22:08:07Z

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 👍

mbrookes · 2017-03-31T22:18:03Z

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

mschipperheyn · 2017-04-11T22:09:38Z

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

cjnahine05 · 2017-06-13T04:57:11Z

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();

windrpha · 2017-06-13T19:46:02Z

Importing and adding injectTapEventPlugin() solved my issue.

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

componentWillMount(){
    injectTapEventPlugin();
	}

jesmarquez · 2017-08-14T16:18:57Z

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()

Special hack for onTouchTap warning see mui/material-ui#4670

oallouch mentioned this issue Jul 13, 2016

v3 passes through bogus props to <input>, causing React to warn erikras/redux-form-material-ui#12

Closed

foxhound87 mentioned this issue Jul 19, 2016

warnings foxhound87/rfx-stack#22

Closed

mpontikes mentioned this issue Aug 5, 2016

[core] Organizing Issues #4911

Closed

13 tasks

winfried-van-loon mentioned this issue Aug 30, 2016

Multiple SketchField components tbolis/react-sketch#5

Closed

oliviertassinari added bug 🐛 Something doesn't work docs Improvements or additions to the documentation and removed bug 🐛 Something doesn't work labels Sep 17, 2016

oliviertassinari changed the title ~~React 15.0.2 "Unknown props" warnings~~ React 15.0.2 "Unknown props onTouchTap" warnings Sep 17, 2016

oliviertassinari closed this as completed Sep 17, 2016

srinathh mentioned this issue Oct 15, 2016

react-tap-event-plugin errors with latest react 15.4.0-rc.4 installed by create-react-app #5396

Closed

iabouhashish mentioned this issue Jun 13, 2017

Button wrapped with Link from react-router does not work in Safari #850

Closed

lellex pushed a commit to makinacorpus/formation-react-tp that referenced this issue Nov 21, 2017

[step-6] Add material-ui and reorganiaze app

37609ed

Special hack for onTouchTap warning see mui/material-ui#4670

lellex pushed a commit to makinacorpus/formation-react-tp that referenced this issue Nov 23, 2017

[step-6] Add material-ui and reorganiaze app

29a036b

Special hack for onTouchTap warning see mui/material-ui#4670

React 15.0.2 "Unknown props onTouchTap" warnings #4670

React 15.0.2 "Unknown props onTouchTap" warnings #4670

Comments

sayanchowdhury commented Jul 10, 2016

sayanchowdhury commented Jul 10, 2016

tavurth commented Jul 10, 2016 • edited Loading

tavurth commented Jul 10, 2016 • edited by oliviertassinari Loading

BlockChange commented Jul 11, 2016 • edited Loading

igl commented Jul 11, 2016

ixrock commented Jul 19, 2016

Ghirigoro commented Jul 24, 2016

vaspoz commented Jul 25, 2016

azamatsmith commented Jul 25, 2016

tathagatbanerjee commented Jul 27, 2016 • edited Loading

johnstew commented Aug 7, 2016

abdennour commented Aug 23, 2016

jurgob commented Aug 25, 2016

igl commented Aug 25, 2016

mattyork commented Sep 7, 2016

darkowic commented Sep 12, 2016

oliviertassinari commented Sep 17, 2016 • edited Loading

surajadh commented Oct 10, 2016 • edited Loading

jakewins commented Oct 20, 2016 • edited Loading

oychao commented Nov 17, 2016

weiss19ja commented Nov 18, 2016

vans163 commented Nov 21, 2016 • edited Loading

oliviertassinari commented Nov 21, 2016 • edited Loading

rdnewman commented Jan 4, 2017

GregTheGreek commented Jan 8, 2017 • edited Loading

ptim commented Jan 9, 2017

Lavioli commented Jan 19, 2017

willklein commented Feb 5, 2017

grishgrigoryan commented Feb 6, 2017

erick2014 commented Mar 31, 2017

mbrookes commented Mar 31, 2017

mschipperheyn commented Apr 11, 2017

cjnahine05 commented Jun 13, 2017

windrpha commented Jun 13, 2017 • edited Loading

jesmarquez commented Aug 14, 2017

tavurth commented Jul 10, 2016 •

edited

Loading

tavurth commented Jul 10, 2016 •

edited by oliviertassinari

Loading

BlockChange commented Jul 11, 2016 •

edited

Loading

tathagatbanerjee commented Jul 27, 2016 •

edited

Loading

oliviertassinari commented Sep 17, 2016 •

edited

Loading

surajadh commented Oct 10, 2016 •

edited

Loading

jakewins commented Oct 20, 2016 •

edited

Loading

vans163 commented Nov 21, 2016 •

edited

Loading

oliviertassinari commented Nov 21, 2016 •

edited

Loading

GregTheGreek commented Jan 8, 2017 •

edited

Loading

windrpha commented Jun 13, 2017 •

edited

Loading