Materialize is not working with React, Webpacka. jQuery is not extended

Question

I have a problem with using materialize-css with React. I have built it using Webpack and Babel. The problem is:

TypeError: $(...).parallax is not a function
TypeError: $(...).material_chip is not a function
TypeError: $(...).modal is not a function
etc.

It is my React class:

import React from 'react';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';

class AwesomeComponent extends React.Component {

    constructor(props) {
        super(props);
    }

    onLike () {
        $('.modal').modal();
    }

    render() {
        return (
            <div>
                <div id="modal1" className="modal">
                    <div className="modal-content">
                        <h4>Modal Header</h4>
                        <p>A bunch of text</p>
                    </div>
                    <div className="modal-footer">
                        <a href="#!" className=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
                    </div>
                </div>
                <a className="waves-effect waves-light btn" onClick={this.onLike}>
                    <i className="material-icons left">
                        cloud
                    </i>
                    Like cloud
                </a>
            </div>
        );
    }

}

export default AwesomeComponent;

This is a part of my webpack.config.js which imports jQuery:

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

This is a part of my package.json:

"dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "materialize-css": "^0.98.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "webpack": "^1.13.3",
    "jquery": "^2.1.4"
  },

Help me please, I have tried everything.

I have debug it. It adds plugins (.modal for example) to $ prototype, but somehow the functions disappeared when I want to use it in the class.

At the end this is a stacktrace:

TypeError: $(...).modal is not a function[Learn More] bundle.js:44497:14
onLike
bound onLike
ReactErrorUtils.invokeGuardedCallback
executeDispatch
executeDispatchesInOrder executeDispatchesAndRelease
executeDispatchesAndReleaseTopLevel
forEach forEachAccumulated
EventPluginHub.processEventQueue
runEventQueueInBatch
ReactEventEmitterMixin.handleTopLevel
handleTopLevelImpl
TransactionImpl.perform
ReactDefaultBatchingStrategy.batchedUpdates
batchedUpdates
ReactEventListener.dispatchEvent
bound

Answer 1

For others with the same problem.

Do not use in webpack.config.js webpack.ProvidePlugin and do not import $ or jQuery. Materialize will provide it for you.

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

To do it use below code on top of you jsx file:

import 'materialize-css';

And do not forgot about proper loaders, it is important for Materialize:

loaders : [
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader?importLoaders=1', 'sass-loader'],
                exclude: ['node_modules']
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader?importLoaders=1'],
                exclude: ['node_modules']
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['babel-loader', 'babel-loader?presets[]=react,presets[]=es2015'],
            }
        ]