Серверный рендеринг SyntaxError с помощью React/Redux/Express

Я пытаюсь получить рендеринг своего приложения с сервера, поэтому пытался реализовать пример ServerRendering отсюда: http://redux.js.org/docs/recipes/ServerRendering.html

Я могу успешно запустить server.js, но получаю сообщение об ошибке «Uncaught SyntaxError: Unexpected token ‹» @ 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

Он должен ссылаться на bundle.js в моей папке dist, но по какой-то причине это не так? Если я сделаю файл index.html точно таким же, как и тот, который возвращает renderFullPage, за исключением того, что я избавлюсь от ${html} и <script> window.__INITIAL_STATE__ = ${JSON.stringify(initialState)} </script>

тогда счетчик работает нормально. Когда я выполняю рендеринг на стороне сервера, кажется, что клиент не может найти код bundle.js, поэтому создает тот, который имеет точно такой же код, как и тот, который он получил от сервера, и поэтому возникает ошибка, поскольку он запускает html, когда он ожидает javascript.


reactjs redux react-redux express
person Data_Crusader    schedule 29.03.2016    source источник
comment
Если я удаляю строку, ошибка исчезает, но тогда счетчик не работает. О какой линии вы говорите?   -  person David    schedule 29.03.2016
comment
‹script src=/dist/bundle.js›‹/script›, я думаю, проблема в том, что клиент не получает файл /dist/bundle.js, который является файлом, в который выводит мой веб-пакет.   -  person Data_Crusader    schedule 29.03.2016
comment
хм... этого раньше у меня не было... извините   -  person David    schedule 29.03.2016
comment
Я забыл его, когда впервые представил, вставил после.   -  person Data_Crusader    schedule 29.03.2016
comment
I can successfully run server.js Я не согласен, вы можете прослушивать порт, но как только вы используете server.js для запроса, он не работает. Вы пишете ES6 или ES5?   -  person lux    schedule 30.03.2016

Ответы (1)


arrow_upward
1
arrow_downward

Это потому, что ваш bundle.js содержит HTML, а не скрипты на стороне клиента. Вы используете универсальный маршрут и не позволяете ему загружать ваши статические ресурсы? Ваш вызов express.static промежуточного ПО use должен идти перед этим фрагментом кода (порядок промежуточного ПО имеет значение).

person Steven    schedule 29.03.2016