title: Uncaught ReferenceError: Main is not defined with webpack/react in Rails 4.2.4
body: <p>I'm facing the error below from Chrome Canary even the webpack works. By the way "Main" is my component created with React 0.14.6</p>
  
  <pre><code>VM601:1 Uncaught ReferenceError: Main is not defined
  (anonymous function) @ VM601:1
  mountComponents      @ react_ujs_mount.self-69e74f4….js?body=1:56
  (anonymous function) @ react_ujs_native.self-69da92a….js?body=1:9
  fire                 @ jquery.self-660adc5….js?body=1:3233
  fireWith             @ jquery.self-660adc5….js?body=1:3363
  ready                @ jquery.self-660adc5….js?body=1:3583
  completed            @ jquery.self-660adc5….js?body=1:3618
  </code></pre>
  
  <p>Do you know if I need to install or set up something else?</p>
  
  <p>Below, you can find installation and configuration that I have in my OS X Yosemite 10.10.5</p>
  
  <p><strong>Webpack</strong></p>
  
  <p>When I run the "webpack" inside my test app, i got the message below. Seems to be that it looks good.</p>
  
  <pre><code>ash: f9147c799d98d76fbd61
  Version: webpack 1.12.14
  Time: 624ms
     Asset     Size  Chunks             Chunk Names
     bundle.js  5.76 kB       0  [emitted]  main
  + 2 hidden modules
  </code></pre>
  
  <p><strong>Babel installation</strong></p>
  
  <pre><code>babel-core@6.7.4
    babel-code-frame@6.7.4
    babel-generator@6.7.2
    babel-helpers@6.6.0
    babel-messages@6.7.2
    babel-register@6.7.2
    babel-runtime@5.8.38
    babel-template@6.7.0
    babel-traverse@6.7.4
    babel-types@6.7.2
  babel-loader@6.2.4
  babel-preset-es2015@6.6.0 extraneous
  babel-preset-react@6.5.0 extraneous
  babel-preset-stage-0@6.5.0 extraneous
  </code></pre>
  
  <p>During my babel installation, i got the message below. </p>
  
  <pre><code>npm ERR! peer dep missing: webpack@1 || ^2.1.0-beta, required by babel
  loader@6.2.4 
  </code></pre>
  
  <p>That appeared when I installed</p>
  
  <pre><code>webpack
  babel-loader
  babel-preset-es2015
  babel-preset-react
  babel-preset-stage-0
  babel loader through 
  </code></pre>
  
  <p>Another question. <strong>Do you know if this could be affecting the generation of the bundle?</strong></p>
  
  <p><strong>.babelrc</strong></p>
  
  <pre><code>{
    "presets": ["es2015", "stage-0", "react"]
  }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>module.exports = {
      entry: "./app/assets/frontend/main.jsx",
      output: {
           path: __dirname + "/app/assets/javascripts",
           filename: "bundle.js"
      },
       resolve: {
       extensions: ['','.js','.jsx']
      },
      module: {
          loaders: [
                { test: /\.jsx$/, loader: "babel-loader" }
          ]
    }
  };
  </code></pre>
  
  <p><strong>greet.jsx</strong></p>
  
  <pre><code>export default class Greet extends React.Component {
     render() {
       return &lt;h2&gt;Hello World&lt;/h2&gt;;
    }
  }
  </code></pre>
  
  <p><strong>main.jsx</strong></p>
  
  <pre><code>import Greet from './greet';
  
  class Main extends React.Component {
      render() {
       return (
          &lt;Greet /&gt;
      );
    }
  }
  
  let documentReady = () =&gt; {
    ReactDOM.render(
       &lt;Main /&gt;,
       document.getElementById('react')
    );
  };
  
  $(documentReady);
  </code></pre>
  
  <p><strong>index.html.erb</strong></p>
  
  <pre><code>&lt;div id="react"/&gt;
  &lt;%= react_component("Main") %&gt;
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "twitter-clone",
    "version": "1.0.0",
    "description": "Twitter clone, written in React, Flux, and Rails",
    "main": "index.js",
    "directories": {
      "test": "test"
    },
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "author": "Jose Alanya",
    "license": "ISC",
    "dependencies": {
      "babel-core": "^6.7.4",
      "babel-loader": "^6.2.4"
    },
    "devDependencies": {
      "babel-core": "^6.7.4",
      "babel-loader": "^6.2.4"
    }
  }
  </code></pre>
  
  <p>Thanks for your prompt answer.</p>