在ES6 Express中渲染React組件與Browserify/Babel不起作用

我在app.js中有一個React.Component，我試圖在Express中渲染它。在ES6 Express中渲染React組件與Browserify/Babel不起作用

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（預browserify）取代bundle.js的內容，它的作品！我從Express獲取字符串形式的以下React應用程序。

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

BUT如果我使用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"

來源

2015-12-03 Henry Zhu

你能解決這個問題嗎？我有同樣的問題，似乎沒有任何新的信息可用。 – callmetwan

不，但我會檢查你傳入React.createFactory（...）的內容。註銷它，可能是錯誤的傳入。錯誤是說我傳入的是錯誤的類型。它需要是一個函數或字符串。 Ty。 –

使用module.exports =而不是export default爲我解決了這個問題。

來源

2015-12-25 23:33:50

Ty。爲什麼'modules.exports'工作和'導出默認'不是？我試圖使用ES6，所以理想情況下會使用導出 –

在ES6 Express中渲染React組件與Browserify/Babel不起作用

回答

相關問題