How do we successfully add CSS and Javascript file from 3rd Party CSS Framework into this Project?

I am relatively new to webpack, so this question may seem newbie…

According to the earlier issue (https://github.com/erikras/react-redux-universal-hot-example/issues/171), and also as I have checked, I can add the css from other front framework ( for example, materialize.css (http://materializecss.com/about.html), or bootstrap.css ) and make it work. I do:

import 'materialize/css/materialize.css';    (in the Client.js)

in the Client.js, with a line " { test: /.css$/, loader: “style-loader!css-loader” }, " added in the loader configuration, and it works out good.

However, when I do as above to include the jquery.js, and materialize.js / bootstrap.js as:

import 'materialize/js/jquery-2.1.1.min.js';    (in the Client.js)
import 'materialize/js/materialize.js';     (in the Client.js)

I get a ton of errors like:

Cannot resolve module ‘jquery’ … Cannot resolve module ‘hammerjs’ …

So anyone could tell me what should I do if I want to use 3rd party framework like Materialize ?

Thank you a lot!

[gabrielmadruga]

As @hank7444 said, you should avoid this:

window.jQuery = require('jquery');
window.$ = require('jquery');

With:

 plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]

In your webpack.config.js

[sunkant]

Currently, I am doing this:

1), In dev.config.js (webpack config):

add loader:

{ test: /\.css$/, loader: "style-loader!css-loader" },

Explanation: why we add this one? To let the webpack to require the CSS file in this project.

2), In client.js:

(npm install materialize-css first and npm install jquery if not installed)

require('materialize-css/dist/css/materialize.css');
window.jQuery = require('jquery');
window.$ = require('jquery');
require('materialize-css/dist/js/materialize.js');
require('materialize-css/js/init.js');

Explanation: why we add these ones? To expose JQuery in the Browser as we normally do this by including the “http:// … … jquery.js” in the index.html. Then, we require the “CSS files”, “Javascript files”, ( note that here we require from the node_modules folder, and this load does not use “babel”, as we config in the Webpack.config.js).

Now the Materialize framework ( or any other 3rd party front-end CSS framework (with js) ) would work.

This solution is hinted by https://github.com/Dogfalo/materialize/issues/1823, helped by @hank7444 @trueter

This is the solution I figure out. Please provide better solutions if possible.