Materialize funktioniert nicht mit React, Webpacka. jQuery ist nicht erweitert

Question

Ich habe ein Problem mit der Verwendung von Materialize-CSS mit React. Ich habe es mit Webpack und Babel gebaut. Das Problem ist:

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

Es ist meine Reaktion Klasse:

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; 

Dies ist ein Teil meiner webpack.config.js ist die jQuery importiert:

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

Dies ist ein Teil von meinem 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" 
    }, 

Hilf mir bitte, ich h Ich habe alles versucht.

Ich habe es debuggen. Es fügt Plugins (.modal zum Beispiel) zu $ ​​prototype hinzu, aber irgendwie sind die Funktionen verschwunden, wenn ich es in der Klasse benutzen will.

Am Ende ist dies ein Stack Trace:

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

Für andere mit dem gleichen Problem.

Verwenden Sie nicht in webpack.config.js webpack.ProvidePlugin und importieren Sie nicht $ oder jQuery. Materialise wird es für Sie bereitstellen.

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

es unter Code auf verwenden Sie dazu von Ihnen Datei JSX:

import 'materialize-css'; 

Und über die richtige Lader nicht vergessen haben, ist es für Materialise wichtig:

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