使用 React/Redux/Express 的服务器渲染 SyntaxError答案

【问题标题】：Server Rendering SyntaxError with React/Redux/Express使用 React/Redux/Express 的服务器渲染 SyntaxError
【发布时间】：2016-07-17 14:08:01
【问题描述】：

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

我可以成功运行 server.js，但是一旦我加载了 localhost，就会收到“Uncaught SyntaxError: Unexpected token

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 但不是出于某种原因？如果我使 index.html 文件与 renderFullPage 返回的文件完全相同，除了摆脱 ${html} 和 <script> window.__INITIAL_STATE__ = ${JSON.stringify(initialState)} </script>

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

【问题讨论】：

"如果我删除该行，错误就会消失，但是计数器不起作用。"你说的是哪条线？
，我认为问题是客户端没有选择 /dist/bundle.js 文件，这是文件我的 webpack 输出到。
嗯...以前没有出现在我面前...抱歉
第一次提交的时候忘记了，以后再放吧。
I can successfully run server.js 我不同意，您也许可以在端口上侦听，但是一旦您使用 server.js 进行请求，它就会变得平淡无奇。你写的是 ES6 还是 ES5？

标签： express reactjs redux react-redux

【解决方案1】：

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

【讨论】：