Rendering React Component in ES6 Express with Browserify / Babel not working

Question

I have a React.Component in app.jswhich I am trying to do in Express.

app.js:

var React = require('react')

class App extends React.Component {
  render () {
    return <div>Hello</div>
  }
}

export default App

server.js:

var ReactApp = React.createFactory(require('./public/js/bundle.js'))
console.log(ReactDOMServer.renderToString(ReactApp()))

If I use app.js (pre-browsify) to replace the contents of bundle.js, it works! I get the following React application in string form from Express.

<div data-reactid=".av7twqopa8" data-react-checksum="-111206364"><button data-reactid=".av7twqopa8.0">click me!</button></div>

BUT , if I use browserify to generate bundle.js via app.js, it throws an error:

 Error: Invariant Violation: Element type is invalid: expected a string       
 (for built-in components) or a class/function (for composite      
 components) but got: object.

My browser command:

"browserify": {
    "transform": [ [ "babelify", { "presets": [ "es2015", "react" ] } ]    ]
 },
 "scripts": {
 "build": "NODE_ENV=production browserify src/main.js | uglifyjs -cm > public/js/bundle.js"

Answer 1

Using module.exports =instead export default, fixed this problem for me.