ftlabs / fastclick

Polyfill to remove click delays on browsers with touch UIs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

dont work with webpack

AliveDD opened this issue · comments

i need to develop with this plugin
im install fastclick from https://npmjs.org/package/fastclick
and connect to webpack
var fastclick = require('fastclick');
module.exports = { entry: { app: 'app.js', vendor: ['fastclick'] } }

and i get err:
> webpack --watch

/.../node_modules/fastclick/lib/fastclick.js:181
    var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;
                               ^

ReferenceError: navigator is not defined
    at /.../node_modules/fastclick/lib/fastclick.js:181:29
    at Object.<anonymous> (/.../node_modules/fastclick/lib/fastclick.js:841:2)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/.../webpack.config.js:5:17)

how to resolve it?

Have you find any solution for this?

I have the same issue.

I have the same issue.

I guess navigator should be checked like this typeof navigator !== 'undefined' before using it in fastclick.js.

This is due to server side code execution, where there is no global navigator object.

There's a monkeypatch way to accomplish this that I read over here.

npm install imports-loader

Then in your webpack config:

module.exports = {
  module: {
    loaders: [
      {
        test: /fastclick/,
        loader: 'imports-loader?define=>false&this=>window'
      }
    ]
  }
};

I don't know if it's still relevant, it works for me without a problem with provide plugin:

new webpack.ProvidePlugin({ FastClick : 'fastclick' })

@thomsa can you actually use fastclick in server side rendering using that method? can you point me to a resource that explains a bit more in depth what is it that you are doing?

fast click is breaking my server side rendering :(

I got FastClick working with Angular (2/4) and Webpack 3 using the following:

In webpack config - Thanks thomsa!
new webpack.ProvidePlugin({ FastClick : 'fastclick' })

In app.component.ts:
ngAfterViewInit() {
      FastClick.attach(document.body);
}