2017-05-29 49 views
6

我試圖用material-uireact-tap-event-plugin工作,但我得到,當應用程序被加載此錯誤:爲什麼不在我的TypeScript項目中工作的react-tap-event-plugin?

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 

這是我index.tsx文件:

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

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

ReactDOM.render(....) 

這是我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> 

這是我的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 
    ] 
} 

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

這裏是到位桶的entire source code

我確定是什麼問題,因爲調試器顯示injectTapEventPlugin被調用,所以爲什麼我得到一個錯誤?

+0

你能用最少的代碼重新創建一個產生相同錯誤的回購嗎? – Kafo

+0

@Kafo https://bitbucket.org/avifatal/public-portal/src/047d385d6c0b69078b62065f9f3fe00013e4acfe/AffiliatePortal.Client.MVC/src/?at=master – Shazam

+0

我認爲問題出在您的導入聲明中......嘗試'import injectTapEventPlugin從'react-tap-event-plugin'' –

回答

4

擺脫你在index.html有兩個<script> S的:

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

有一個在他們包括因爲兩個reactreact-dom已經包含在你的package.json依賴沒有意義的。既然你不使用<script> s到包括reactreact-dom沒有理由讓他們

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

:接下來也會從webpack.config.js擺脫你externals的。

致電injectTapEventPlugin將自定義事件和道具注入到元素,並且必須使用react-dom調用以正確應用和注入道具。下面的幾行in the source

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

注入插件直接進入react-dompackage.json安裝副本,在路徑node_modules/react-dom/lib/ReactDOM.jsnode_modules/react-dom/dist/react-dom.js

由於您包含兩次相關性,所以向package.json中的react-dom副本的注入是被覆蓋。因此,當您將它包含在<script>中時,您會看到錯誤,因爲<script>的副本沒有插入插件。從index.html中刪除<script>將消除這種二次包含,並阻止注入被覆蓋。

2

這看起來像是由在index.html和webpack.config.js中引用React引起的。從webpack.config中刪除以下兩行。js:

externals: { 
    "react": "React",  // remove this 
    "react-dom": "ReactDOM" // remove this 
}, 
相關問題