Correct way to require material-ui by webpack

Question

I'm trying to use material-ui by webpack. However, I got the error message in chrome 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 this.

The answer is quite simple:

1. Install material-ui by npm: npm install material-ui --save
2. Add resolve.moduleDirectories, resolve.extensions
3. Turn on harmony mode in jsx-loader by jsx-loader?harmony

The final 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;