Question

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

我可以成功运行server.js但是我得到了“未捕获的SyntaxError：意外的令牌＆lt;”错误@ bundle.js：2一旦我加载localhost。我相信它与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，但这不是出于某种原因？如果我使index.html文件与renderFullPage返回的文件完全相同，除了删除${html}和 <script> window.__INITIAL_STATE__ = ${JSON.stringify(initialState)} </script>

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

Answer 1

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

使用React / Redux / Express的服务器渲染语法错误

1 个答案: