React-Lite, Material-UI and fastclick problem

[Cartman720]

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,
            }
        })
    ]
}

[Lucifier129]

Which browser did you use?

We should emulate mobile device for enabling tap event in some browsers of PC.

[Cartman720]

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]

Which version of Material-UI did you use?

In this demo, it works well. Click here to see the commit of code change.

[Cartman720]

Hi Lucifer

all my packages are latest versions, I tries to click on IconButton but nothing occures. Will try to create example and show you.

Thanks!

2017-02-02 6:47 GMT+04:00 工业聚 notifications@github.com:

Which version of Material-UI did you use?

In this demo https://lucifier129.github.io/material-ui/build/, it works well. Click here https://github.com/Lucifier129/material-ui/commit/709e9cc7988d586bf247faab37f81c4dc353878e to see the commit of code change.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Lucifier129/react-lite/issues/96#issuecomment-276853078, or mute the thread https://github.com/notifications/unsubscribe-auth/AL4z7yTVp2OQjBeU0P85qtZXVWZGVk7Tks5rYUPcgaJpZM4LzncB .

[mauron85]

@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