Why isn't react-tap-event-plugin working in my TypeScript project?

Question

I'm trying to work with material-ui and react-tap-event-plugin but I am getting this error when the app is loaded:

react-dom.js:18238 Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://....
  in button (created by EnhancedButton)
  in EnhancedButton (created by IconButton)
  in IconButton (created by AppBar)
  in div (created by Paper)
  in Paper (created by AppBar)
  in AppBar (created by AppLayout)
  in div (created by AppLayout)
  in div (created by AppLayout)
  in AppLayout
  in MuiThemeProvider

This is my index.tsx file:

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

injectTapEventPlugin();//I am able to get into this in the js debugger

ReactDOM.render(....)

This is my index.html file:

<div id="app"></div>
<script src="/node_modules/react/dist/react.js"></script>
<script src="/node_modules/react-dom/dist/react-dom.js"></script>
<script src="/dist/bundle.js"></script>

This is my tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist/",

    "allowJs": true,
    "sourceMap": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "suppressImplicitAnyIndexErrors": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  },
  "include": [
    "./src/**/*",
  ],
  "exclude": [
    "node_modules" // don't run on any code in the node_modules directory
  ]
}

My package.json:

{
  "name": "affiliate_portal_client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/react": "^15.0.25",
    "@types/react-dom": "^15.5.0",
    "react": "^15.5.4",
    "react-addons-css-transition-group": "^15.5.2",
    "react-dom": "^15.5.4",
    "react-tap-event-plugin": "^2.0.1",
    "material-ui": "^0.18.1"
  },
  "devDependencies": {
    "@types/react-tap-event-plugin": "0.0.30",
    "awesome-typescript-loader": "^3.1.3",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.3.3"
  }
}

Here is the entire source code on BitBucket.

I'm sure what the problem is because the debugger shows that injectTapEventPlugin is invoked, so why am I getting an error?

Answer 1

Get rid of the two <script>s you have in your index.html:

<script src="/node_modules/react/dist/react.js"></script>
<script src="/node_modules/react-dom/dist/react-dom.js"></script>

There is no point in including them because both react and react-dom are already included as dependencies in your package.json. Next get rid of your externals from webpack.config.js:

externals: {
    "react": "React",
    "react-dom": "ReactDOM"
}

Since you're not using <script>s to include react and react-dom there is no reason to have them.

The call injectTapEventPlugin injects the custom events and props to elements and must be called with react-dom to correctly apply and inject the props. The following lines in the source:

require('react-dom/lib/EventPluginHub').injection.injectEventPluginsByName({
  'TapEventPlugin':       require('./TapEventPlugin.js')(shouldRejectClick)
});

Inject the plugin directly into the copy react-dom you installed in package.json, at the path node_modules/react-dom/lib/ReactDOM.js, not node_modules/react-dom/dist/react-dom.js.

Since you include the dependencies twice, the injection to the copy react-dom in the package.json is overridden. Thus, when you include it with <script>s and you see the error because the copy from <script> doesn't have the plugin injected. Getting rid of the <script>s from index.html will get rid of this secondary inclusion and stop the injection from being overwritten.

Answer 2

This looks like to be caused by referencing React in both index.html and webpack.config.js. Remove the following 2 lines from webpack.config.js:

externals: {
    "react": "React",      // remove this
    "react-dom": "ReactDOM"    // remove this
},