React SSR：錯誤未捕獲SyntaxError：意外的令牌<

我創建了一個帶有React的小應用程序並設置了一些簡單的路由。它在我的本地主機上的客戶端上正常工作。所有JS代碼捆綁在一個文件中，並通過index.html文件訪問。當我部署到服務器時，對路由的請求不起作用，因爲一切都是客戶端。React SSR：錯誤未捕獲SyntaxError：意外的令牌<

爲了解決這個問題，我試着查看幾個使用ExpressJS服務索引文件的教程，這樣我就可以在任何路徑上加載客戶端應用程序。問題是，當我服務的索引文件，它給了我的HTML文件，我得到這個錯誤：app.js:1 Uncaught SyntaxError: Unexpected token <，我不知道爲什麼會發生這種情況，我怎麼能解決這個問題。每當我刪除腳本標記時，只需一些HTML文件即可正確傳輸。我不知道該怎麼做，因爲我發現其他來源也不是很有幫助。我需要做些什麼來解決這個問題？

這裏是我的服務器上的文件：

const express = require('express') 
const path = require('path') 
const port = process.env.PORT || 3000 
const app = express() 

app.use(express.static(__dirname + '/dist')) 

app.get('*', function (request, response){ 
    response.sendFile(path.resolve(__dirname, '../dist', 'index.html')) 
}) 

app.listen(port)

，這裏是我的索引文件通過快遞送達：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
    <title>app</title> 

    <!-- build:css css/app.min.css --> 
    <link rel="stylesheet" href="css/main.css"> 
    <!-- endbuild --> 
</head> 
<body> 

<div id="app"></div> 

    <!-- build:js js/app.min.js --> 
    <script src="js/app.js"></script> 
    <!-- endbuild --> 
</body> 
</html>

謝謝！

來源

2017-04-23 Marciano

這聽起來像你的捆綁無法正常工作。我強烈建議使用create-react-app（由react的創建者提供）。它將消除所有嘗試手動執行此操作的問題。如果你最終想要手動管理它，你可以使用npm run eject來完全控制。他們還提供tutorial on how to integrate with a node backend。

最後，如果您想遷移到服務器端呈現（SSR），這裏是a guide on the steps needs coming from create-react-app，他們還提供了一個帶有代碼示例的github存儲庫。

來源

2017-04-23 14:09:43

React SSR：錯誤未捕獲SyntaxError：意外的令牌<

回答

相關問題