Pruebe esto en su archivo JS de entrada

 import 'materialize-css'; // It installs the JS asset only import 'materialize-css/dist/css/materialize.min.css';

y listo!

Actualización: he puesto todos los detalles necesarios para que tu código funcione. Probar esto

El archivo index.jsx está aquí

 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import $ from 'jquery'; import 'materialize-css'; import 'materialize-css/dist/css/materialize.min.css'; class Form extends Component { constructor(props) { super(props); $(document).ready(function() { $('.chips').material_chip({ data: [{ tag: 'Apple', }, { tag: 'Microsoft', }, { tag: 'Google', }], }); }); } render() { return ( <div> <div className="chips"></div> <button>Add</button> </div> ) } } ReactDOM.render(<Form />, document.getElementById('app'));

y package.json es como

 "dependencies": { "babel-preset-react": "^6.16.0", "css-loader": "^0.26.1", "font-loader": "^0.1.2", "jquery": "^3.1.1", "materialize-css": "^0.97.8", "react": "^15.4.2", "react-dom": "^15.4.2", "redux": "3.6.0", "style-loader": "^0.13.1" }, "devDependencies": { "babel": "^6.5.2", "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.2", "webpack-hot-middleware": "^2.15.0" }

y webpack.config.js es

 const webpack = require('webpack'); module.exports = { entry: [Screenshot from 2017-01-15 18-11-16 "./src/index.jsx", "webpack-dev-server/client?http://localhost:3000/", "webpack/hot/only-dev-server" ], output: { filename: "bundle.js", path: __dirname + '/public' }, devServer: { contentBase: './public', port: 3000 }, // Bundle lookup dir for included/imported modules // By default, bundler/webpack with search here for the scripts resolve: { modulesDirectories: ['node_modules', 'src'], extensions: ['', '.js', '.jsx'] }, // make sure you added babel-loader to the package // npm i babel-loader babel-core babel-preset-es2015 -D module: { loaders: [ { test: /\.js[x]?$/, // Allowing .jsx file to be transpiled by babel exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }, { test: /\.css$/, loaders: [ 'style', 'css?importLoaders=1', 'font?format[]=truetype&format[]=woff&format[]=embedded-opentype' ] }, { test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader?name=fonts/[name].[ext]' } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ] };

Ningún error en absoluto.

Con MNP:

Paso 1: Instalar materializar

Si está utilizando npm, asegúrese de instalar materialise usando el comando que se encuentra en su documentación:

 npm install materialize-css@next

NO TE PIERDAS el ' @nex t' al final. La versión instalada será algo así como: "^1.0.0-rc.2" O "^1.0.0-alpha.4"

Paso 2: materialización de la importación:

 import 'materialize-css/dist/css/materialize.min.css' import M from 'materialize-css/dist/js/materialize.min.js'

O

 import 'materialize-css/dist/css/materialize.min.css' import M from 'materialize-css'

Para que la importación de css funcione, necesitaría un cargador de css . Tenga en cuenta que este cargador ya está incluido en los proyectos creados con create-react-app, por lo que no necesita los siguientes pasos. Si, en cambio, está utilizando una configuración de paquete web personalizada, ejecute:

 npm install --save-dev style-loader css-loader

Ahora agregue css-loader y style-loader en la configuración del paquete web

 const path = require("path"); module.exports = { entry: "./src/index.js", output: { filename: "bundle.js", path: path.join(__dirname, "build") }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /.js$/, exclude: /(node_modules)/, use: { loader: "babel-loader", options: { presets: ["env", "react"] } } } ] } }

Ahora puede inicializar componentes individualmente o todos a la vez usando M.AutoInit();

Con CDN:

Agregue lo siguiente en su archivo HTML.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

Luego, en la configuración del paquete web, agregue elementos externos: https://webpack.js.org/configuration/externals/