materialize-css not required on Npm Webpack

[kamuran21]

after installed package, I try to require it in my main.js file.

var materialize = require("materialize-css")

But npm give an error "Cannot resolve module 'materialize-css' in path

what is going wrong?

[isaiah]

The js file is not exposed as a commonjs module.

[kamuran21]

How can I solve it?
when i require js file directly
var materialize = require("./materialize.min.js");
It gives another error "Cannot Resolve Module "hammerjs" in assets/js"

what is wrong here ?

[scourgetheone]

@kamuran21 npm i --save hammerjs
Then, depending on your webpack loader config, you may have to add this to your list of loaders:
{ test: /.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" }
That should suppress some error messages about the woff2 files that webpack is trying to load.
Also, you don't need to assign materialize to a variable, just do a require.
Make sure you have jquery npm package and do this:

window.jQuery = require("jquery");
window.$ = require("jquery");
require("./materialize.css");
require("./materialize.min.js");

[kamuran21]

@scourgetheone thank you.
also I solve the problem with npm install hammerjs --save

[kriscarle]

I solved this temporarily by editing /node_modules/materialize-css/package.json and adding a "main": "bin/materialize.js",

There is also a pull request #1801 that I think will fix this.

[kamuran21]

Thanks @kriscarle, your solution seems good and better.

[marcolz]

Webpack extends the concept and behavior of require(). You could simply load whatever you need by referencing it directly. Example:

npm install materialize-css --save

// entry.js
require('materialize-css/sass/materialize.scss');

Works like a charm!

[Outpox]

If anyone is struggling and find this thread, you should checkout https://github.com/Zevran/materialize-loader which will let you easily import Materialize-css in your webpack application. :+1:

[themese]

Not saying it doesn work (didn't really tried it), but is it really necessary? I just required manterialize.min.js and materialize.min.css in my main js file and with the usual url and file loader from webpack works fine

[Outpox]

No it's not indeed, but I was having some issues requiring the files and it helped me figure out how I was supposed to do, so I just shared it (since I found this thread) :)

[themese]

Sure! :)

[tomscholz]

Please close!