The right way to require stuff-ui via webpack

Question

I am trying to use material-ui using webpack. However, I got an error message in hrome dev-tool

Uncaught ReferenceError: require is not defined 

My webpack.config.js:

 var bower_dir = __dirname + '/bower_components'; var node_modules_dir = __dirname + '/node_modules'; var config = { addVendor: function (name, path) { this.resolve.alias[name] = path; this.module.noParse.push(new RegExp(path)); }, entry: { Messenger: './app/Messenger.jsx', AppComponent: './app/AppComponent.jsx' }, // The resolve.alias object takes require expressions // (require('react')) as keys and filepath to actual // module as values resolve: { alias: {}, extensions: ['', '.jsx'] }, output: { path: './www', filename: '[name].bundle.js' }, module: { noParse: [], loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, // use ! to chain loaders { test: /\.png$/, loader: "url-loader?limit=100000&mimetype=image/png" }, { test: /\.jsx$/, loader: 'jsx-loader' } ] } }; config.addVendor('react', bower_dir + '/react/react.min.js'); config.addVendor('material-ui', bower_dir + '/material-ui/src/index.js'); config.addVendor('react-tap-event-plugin', node_modules_dir + '/react-tap-event-plugin/src/injectTapEventPlugin.js'); module.exports = config; 

I need some suggestions on how to require material-ui with webpack. Thanks.

Answer 1

Finally, I got it.

The answer is pretty simple:

• Install material-ui on npm: npm install material-ui --save
• Add resolve.moduleDirectories , resolve.extensions
• Enable harmony mode in jsx-loader on jsx-loader?harmony

Last webpack.config.js I got it:

 var config = { entry: { Messenger: './app/Messenger.jsx', AppComponent: './app/AppComponent.jsx' }, resolve: { modulesDirectories: ['node_modules'], alias: {}, extensions: ['', '.jsx', '.js'] }, output: { path: './www', filename: '[name].bundle.js' }, module: { noParse: [], loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, // use ! to chain loaders { test: /\.png$/, loader: "url-loader?limit=100000&mimetype=image/png" }, { test: /\.jsx$/, loader: 'jsx-loader?harmony' } ] } }; module.exports = config;