使用static-render-webpack-plugin的反應路由器問題

上週我剛剛開始使用React，並且在之後static-render-webpack-plugin遇到問題。使用static-render-webpack-plugin的反應路由器問題

如果您想仔細查看，我已將代碼online at GitHub。

在按照教程並做了一些修改之後（我添加了babel-core，我將js加載器更改爲babel-loader，並且入口點url需要修正），當我試圖運行webpack -p來生成靜態文件，我得到以下錯誤：

ERROR in ./src/entry.js 
Module build failed: SyntaxError: .../src/entry.js: Unexpected token (10:2) 
    8 | 
    9 | const routes = (
> 10 | <Route path="/" handler={RootPage}> 
    | ^

我想可能有一些做與the changes made with the latest version of react-router。我使用的是最新版本，但本教程的語法看起來像可能是在v.1.0之前編寫的。舉例來說，我認爲說把它添加到src/entry.js文件教程的部分：

if (typeof document != 'undefined') { 
    Router.run(routes, path, (Root) => { 
    React.render(<Root/>, document); 
    }); 
}

可能需要重寫，以這樣的（但我不知道這是否是完全正確）：

if (typeof document != 'undefined') { 
    ReactDOM.render(routes, document); 
}

有更明顯的事情，雖然，因爲我得到同樣的錯誤消息，當我嘗試重寫片斷，然後運行webpack-dev-server - 這是應該打的代碼的唯一時間。（是的，我加import ReactDOM from 'react-dom';到頁面的頂部，"react-dom": "^0.14.7",到package.json。）

我相信這部分（也src/entry.js）需要重寫，以配合最新的react-router太多，但我不知道怎麼樣：

export default function(path, props, callback) { 
    Router.run(routes, path, (Root) => { 
    const html = React.renderToString(<Root/>); 
    callback('<!doctype html>' + html); 
    }); 
}

在此先感謝您提供任何幫助或提示。

來源

2016-03-07 Jackie Johnston

我遇到類似的問題。自從你發佈這個版本已經過了幾個星期。運氣好的話？！ – Ivan

@Ivanoats對不起，我無法得到它的工作。我認爲也許嘗試使用「react-router」的教程：「1.0.3」而不是2.0版本可能是一個起點，但是如果不知道所有依賴的版本，就會有很多猜測。我真的希望插件鏈接到一個工作演示和回購。我一直在尋找http://www.metalsmith.io/作爲替代。 –

謝謝 - 是的，在這兩點上。回購應該有一個超出測試範圍的實例，而Metalsmith也是我的備份。 – Ivan

由於Webpack不知道如何將JSX轉換爲ES5，所以您的代碼破壞了。您已經指定babel-loader作爲您的webpack配置中的JS文件的加載器，但不幸的是，Babel 6沒有開箱即用，您需要包含包含編譯不同語法的規則的「插件」。在這種情況下，您需要es2015預設支持所有ES6語法，並且react預設爲支持JSX。您也錯過了您想要導入到您的webpack配置中的extract-text-webpack-plugin。通過NPM阻攔這些：

npm i -D babel-preset-2015 babel-preset-react extract-text-webpack-plugin

然後，預設添加到您的webpack.config.js文件中的JS裝載機節/ JSX文件：

{                                               
    test: /\.(js|jsx)?$/,                                             
    loader: 'babel',                                            
    exclude: /node_modules/,                                           
    query: {                                               
    presets: ['es2015', 'react']                                       
    }                                                 
}

我叉你的回購和做出這些改變並能夠進一步完成編譯過程。看起來您的項目中仍然存在特定的模塊依賴項，您仍然需要解決該問題。

來源

2016-03-07 01:20:21

謝謝你的幫助！我讚賞解釋。我做了更改，不再收到相同的錯誤消息！這是一個改進。我現在必須弄清楚它爲什麼說'NotFoundRoute中的錯誤未定義。我試圖完全刪除404頁面，但後來得到了一系列'渲染中的錯誤不是函數'消息。谷歌搜索後，我想我可能會回到升級問題與React和react-router。 –

這一切都推到回購？我很樂意稍後看看代碼。 –

是的，它在那裏。非常感謝！ –

使用static-render-webpack-plugin的反應路由器問題

回答

相關問題