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

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;