Using MaterializeCSS with Webpack - Cannot resolve module 'hammerjs'

Question

I'm building a project with webpack. The project uses materializecss. When I add materialize.js to the entry file, it complains with the error below Cannot resolve module 'hammerjs'

When I open the file, I can see the definition there but it appears webpack is unable to identify it. Same thing with weakmap in knockout-es6. My solution to this was to add a reference to hammer.min.js in resolve.alias but not sure if that is the correct thing to do.

How do I get webpack to recognize these dependencies when they are bundled together with the library in question - in this case materialize.js?

Answer 1

As long as you have hammerjs installed to your project (ie. npm i hammerjs --save), it should find it. As pointed out by @egunays you should also have import 'expose?Hammer!hammerjs/hammer to get access to Hammer object.

In case you are worried about possible duplication (you can verify this by examining the generated bundle), you can use webpack.optimize.DedupePlugin. webpack.optimize.CommonsChunkPlugin can come in handy as well. That will allow you to separate your app code from a vendor bundle.

See official optimization docs for more info.

Answer 2

It's better to use ProvidePlugin for this.

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "Hammer": "hammerjs/hammer"
}),

This does not require an extra loader and is actually recommended in the docs:

There are cases where you want a module to export itself to the global context. Don't do this unless you really need this. (Better use the ProvidePlugin) 1