Geek Answers Handbook

Why doesn't the action-tap-event-plugin plugin work in my TypeScript project?

I try to work with material-uiand react-tap-event-plugin, but I get this error when loading the application:

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 file index.tsx:

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 file index.html:

<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 mine 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 all the source code in BitBucket.

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

+6
source share
2 answers

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

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

, react, react-dom package.json. externals webpack.config.js:

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

<script> react react-dom, .

injectTapEventPlugin react-dom, . :

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

react-dom, package.json, node_modules/react-dom/lib/ReactDOM.js, node_modules/react-dom/dist/react-dom.js.

, react-dom package.json . , <script>, , <script> . <script> index.html .

+4

, React index.html, webpack.config.js. 2 webpack.config.js:

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

More articles:


All Articles