Materialize 不适用于 React、Webpacka。 jQuery 没有扩展答案

【问题标题】：Materialize is not working with React, Webpacka. jQuery is not extendedMaterialize 不适用于 React、Webpacka。 jQuery 没有扩展
【发布时间】：2017-07-14 06:58:42
【问题描述】：

我在将 materialize-css 与 React 一起使用时遇到了问题。我使用 Webpack 和 Babel 构建了它。问题是：

TypeError: $(...).parallax 不是函数
TypeError: $(...).material_chip 不是函数
TypeError: $(...).modal 不是函数
等等

这是我的 React 类：

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;

这是我导入 jQuery 的 webpack.config.js 的一部分：

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

这是我的 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"
  },

请帮帮我，我什么都试过了。

我已经调试过了。它向 $ 原型添加了插件（例如 .modal），但是当我想在类中使用它时，这些功能不知何故消失了。

最后这是一个堆栈跟踪：

TypeError: $(...).modal 不是函数[了解更多] bundle.js:44497:14
点赞
绑定喜欢
ReactErrorUtils.invokeGuardedCallback
执行调度
执行DispatchesInOrder 执行DispatchesAndRelease
executeDispatchesAndReleaseTopLevel
为每个 forEachAccumulated
EventPluginHub.processEventQueue
runEventQueueInBatch
ReactEventEmitterMixin.handleTopLevel
handleTopLevelImpl
TransactionImpl.perform
ReactDefaultBatchingStrategy.batchedUpdates
批量更新
ReactEventListener.dispatchEvent
绑定

【问题讨论】：

你有没有让模态显示？我遇到了类似的问题，只是在调用 open 时我没有收到错误。什么都没有发生。我的设置和你一样。下面的答案也不起作用。另外，material-react Modal 现在已经坏掉了。

标签： javascript jquery reactjs webpack materialize

【解决方案1】：

对于有同样问题的其他人。

不要在 webpack.config.js 中使用 webpack.ProvidePlugin 并且不要导入 $ 或 jQuery。 Materialise 会为您提供。

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

要做到这一点，请在 jsx 文件顶部使用以下代码：

import 'materialize-css';

不要忘记正确的加载器，这对 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'],
            }
        ]

【讨论】：