React 15.0.2 "Unknown props onTouchTap" warnings

[sayanchowdhury]

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)

[sayanchowdhury]

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]

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]

Fixed by adding:

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

To the component.

[BlockChange]

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]

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]

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

[Ghirigoro]

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

[vaspoz]

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

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]

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]

Hi there,

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

Unknown prop labelColor on <div> tag.

[abdennour]

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]

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]

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

[mattyork]

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