使用Browserify/Babel在ES6Express中渲染React组件不起作用

Question

我在app.js中有一个React.组件，我正试图在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()))

如果我使用app.js（pre-browsrify）来替换bundle.js的内容，它是有效的！我从Express获得以下字符串形式的React应用程序。

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

但是如果我使用browserfy通过app.js生成bundle.js，它会抛出一个错误：

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

我使用的浏览命令是：

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

Answer 1

使用module.exports =而不是export default为我解决了这个问题。