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

Question

I have a React.Component in app.js which I'm trying to render 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-browserify) to replace the contents of bundle.js, it works! I get the following React app 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.

The browserify command I'm using is:

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

Were you able to solve this? I'm having the same issue and there doesn't seem to be any new information available. — callmetwan
– callmetwan, Commented Apr 28, 2016 at 3:06
No but I would check what your passing into React.createFactory(...). Log it out, it may be the wrong thing to pass in. The error is saying something I passed in was the wrong type. It needs to be a function or string. — hzhu
– hzhu, Commented May 27, 2016 at 23:41

Phil Pill · Accepted Answer · 2015-12-25 23:33:50Z

2

Using module.exports = instead of export default fixed this issue for me.

answered Dec 25, 2015 at 23:33

Phil Pill

3012 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hzhu Over a year ago

Ty. Why does 'modules.exports' work and 'export default' not? I'm trying to use ES6 so ideally would be using export

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related