Uncaught ReferenceError: XXXX is not defined

I got a very weird bug which I've spent a couple of hours to solve but that just didn't work. The code is shown below:

class Post extends React.Component {
  render () {
    return (
      <div>
        <div>TEST</div>
      </div>
    );  
  }
}

This works fine but if I added something like var XXX = require('XXX'). It will say, Uncaught ReferenceError: Post is not defined, which doesn't make sense to me at all. What's more interesting is that if you create your react component like the following approach:

var MyComponent = React.createClass(/*...*/); 

This will not work if you have require module in front unless you remove the var and it works magically.

So, I don't know if that's a problem of my rails project or something goes wrong with ES6.

Does anyone have similar problem before?