在 ES6 Express 中使用 Browserify/Babel 渲染 React 组件不起作用答案

【问题标题】：Rendering React Component in ES6 Express with Browserify/Babel not working在 ES6 Express 中使用 Browserify/Babel 渲染 React 组件不起作用
【发布时间】：2015-12-03 04:37:39
【问题描述】：

我在 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（预浏览）来替换 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"

【问题讨论】：

你能解决这个问题吗？我遇到了同样的问题，似乎没有任何新信息可用。
不，但我会检查你传递给 React.createFactory(...) 的内容。注销它，可能是传入错误。错误是说我传入的内容是错误的类型。它需要是一个函数或字符串。

标签： ecmascript-6 browserify babeljs isomorphic-javascript

【解决方案1】：

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

【讨论】：

泰。为什么“modules.exports”有效而“export default”无效？我正在尝试使用 ES6，所以理想情况下会使用 export