React/Redux/Express 服务器呈现语法错误

Question

我正在尝试从服务器获取我的应用程序呈现，因此我试图从此处实施 ServerRendering 示例：http://redux.js.org/docs/recipes/ServerRendering.html

我可以成功运行 server.js 但是我在加载本地主机后收到 "Uncaught SyntaxError: Unexpected token <" 错误@ bundle.js:2。我相信它与 renderFullPage() 函数有关：

function renderFullPage(html, initialState) {
  return `
    <!doctype html>
    <html>
      <head>
        <title>Redux Universal Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
        </script>
        <script src="/dist/bundle.js"></script>
      </body>
    </html>
    `
}

如果我删除行 <script src="/dist/bundle.js"></script>，错误就会消失，但计数器将不起作用。

这是错误引用的 bundle.js：

bundle.js

它应该在我的 dist 文件夹中引用 bundle.js 但不是出于某种原因？如果我制作一个与 renderFullPage 返回的文件完全相同的 index.html 文件，除了去掉 ${html} 和 <script> window.__INITIAL_STATE__ = ${JSON.stringify(initialState)} </script>

然后计数器工作正常。当我进行服务器端渲染时，客户端似乎找不到 bundle.js 代码，因此创建了一个与从服务器接收到的代码完全相同的代码，因此出现错误运行s 到 html 时它期望 javascript.

Answer 1

这是因为您的 bundle.js 包含 HTML 而不是您的客户端脚本。您是否正在使用包罗万象的路线而不让它加载您的静态资产？您的 express.static 中间件 use 调用应该在这段代码之前进行（中间件顺序很重要）。

React/Redux/Express 服务器呈现语法错误

Server Rendering SyntaxError with React/Redux/Express

express

reactjs

redux

react-redux