Geek Answers Handbook

Using MaterializeCSS with Webpack - Cannot resolve hammerjs' module

I am creating a project using webpack. The project uses materializecss . When I add materialize.js to the recording file, it complains about the error below Cannot resolve module 'hammerjs'

When I open the file, I see this definition there, but it seems that webpack cannot identify it. Same thing with a weak knockout player es6. My solution was to add a link to hammer.min.js to resolve.alias , but not sure if this is the right thing.

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

+5
source share
2 answers

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

If you are concerned about possible duplication (you can check this by examining the generated package), you can use webpack.optimize.DedupePlugin . webpack.optimize.CommonsChunkPlugin may come in handy. This will allow you to separate your application code from the provider package.

For more information, see white papers on optimization .

+8
source

It is better to use ProvidePlugin for this.

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

This does not require an additional bootloader and is actually recommended in the docs:

There are times when you want a module to export itself to a global context. Do not do this unless you really need it. (Better to use ProvidePlugin) 1

+6
source

More articles:


All Articles