MaterializeがReact、Webpackaで動作していません。 jQueryが拡張されていません

Question

Reactでmaterialize-cssを使用する際に問題があります。私はWebpackとBabelを使って構築しました。問題は次のとおりです。

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

これは一部です：これはjQueryのをインポート私webpack.config.jsの一部である

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; 

：

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

それは私のリアクトクラスです私のパッケージの.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" 
    }, 

aveはすべてを試しました。

私はそれをデバッグしました。これは$ prototypeにプラグイン（.modalなど）を追加しますが、クラスで使用したいときに何とか関数が消えてしまいました。同じ問題で他の人のために

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

：

が終わり、これはスタックトレースです。

webpack.config.js webpack.ProvidePluginでは使用せず、$またはjQueryをインポートしないでください。マテリアライズはそれをあなたに提供します。

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

それはファイルJSXあなたの上にコードの下に使用して行うには：

import 'materialize-css'; 

を、適切なローダーを忘れないでください、それがマテリアライズのために重要である：

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'], 
      } 
     ]