React-Lite, Material-UI and fastclick problem
Cartman720 opened this issue · comments
Hi, I am using react-lite and its's react-lite/lib/react-tap-event-plugin with installed as dependency fastclick, because without fastclick webpack throws error since react-lite/lib/react-tap-event-plugin requires it. Everything was great until I opened browser and clicked on material-ui buttons and found that my click events don't working. Maybe I have done something wrong.
I found react-lite really useful, but this is huge problem because my project uses material-ui and as I found they are not compatible.
that would be great if someone could help me with this!
Thanks in advance.
And this is my webpack with aliases
let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
var DefinePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false')),
process: {
env: {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
}
}
});
let isProd = process.env.NODE_ENV == 'production';
module.exports = {
context: __dirname,
devtool: 'inline-source-map',
entry: {
bundle: './src/app/app-client.jsx',
styles: './src/app/sass/main.scss',
vendor: ['react', 'react-dom']
},
output: {
publicPath: '/build/',
filename: '[name].js',
chunkFilename: '[name].[chunkhash].js',
path: './src/build',
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'react': 'react-lite',
'react-dom': 'react-lite',
'react-tap-event-plugin': 'react-lite/lib/react-tap-event-plugin'
}
},
module : {
rules : [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(['css-loader','sass-loader'])
},
{
test: /\.jsx?$/,
exclude: [/node_modules/, /libs/],
use: {
loader: "babel-loader",
query: {
presets: [['es2015', { modules: false }], 'react', 'stage-2', 'stage-3' ],
plugins: [ "transform-runtime" ]
}
}
},
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
use: {
loader:'file-loader'
}
}
]
},
plugins: [
DefinePlugin,
new ExtractTextPlugin('[name].css'),
new CleanWebpackPlugin(['build'], {
root: path.resolve(__dirname, 'src'),
verbose: true,
dry: false,
exclude: ['bundle.js', 'styles.css', 'styles.js', 'vendor.js']
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: "[name].js",
minChunks: Infinity
}),
new webpack.optimize.UglifyJsPlugin({
comments: false, // remove comments
compress: {
unused: true,
dead_code: true, // big one--strip code that will never execute
warnings: false, // good for prod apps so users can't peek behind curtain
drop_debugger: true,
conditionals: true,
evaluate: true,
drop_console: true, // strips console statements
sequences: true,
booleans: true,
}
})
]
}
Which browser did you use?
We should emulate mobile device for enabling tap event in some browsers of PC.
Hi
Thanks for response.
I have tried on latest Chrome, and on both desktop and real mobile (Galaxy S5), as well as chrome devtools emulator of mobile.
can you show me your example or step by step little tutorial about that, though I think it is very simple and problem is in my approach of using it.
@Lucifier129 Great work. But I also have an issue with material-ui. In chrome (ff seems ok).
Switching tabs doesn't work well. Usually first click is not registered. Repeaded clicks are usually fine.
https://lucifier129.github.io/material-ui/build/#/components/tabs
material-ui: 0.18.3
react-lite: 0.15.37
Chrome 59