Question

我在app.js中有一个React.Component，我试图在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-browserify）来替换bundle.js的内容，它就可以了！我从Express。

以字符串形式获得以下React应用程序

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

但是如果我使用browserify通过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命令是：

"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为我解决了这个问题。

使用Browserify / Babel在ES6 Express中渲染React组件无法正常工作

1 个答案: