Как решить 'Uncaught SyntaxError: Неожиданный токен <' при попытке обслужить пакет с ssr? - PullRequest
0 голосов
/ 24 мая 2019

Я пытаюсь реализовать базовый SSR с Redux из документации со списком покупок.HTML обслуживается и отображается правильно, но затем возникает вышеупомянутая проблема.Похоже, что пакет не обслуживается, и мне интересно, где я ошибся.

Я попытался изменить путь, чтобы увидеть, была ли ошибка в моем синтаксисе.Я сканировал HTML миллион раз, но не вижу проблемы.Я читаю другие посты.Это кажется довольно распространенной проблемой.Ничто еще не решило проблему.Например, предложение добавить тег.

Настройка моего файла:

-client
   -public
       -bundle.js
   -src
     -actions
     -components
     -containers
     -reducers
     -server.js
     -index.js
     -ssrServer
        -serverBundle.js

----- Код сервера:

Путь к комплекту:

app.use('/public', express.static(path.join(__dirname, '../public')));

----Функция с соответствующим html:

const renderFullPage = (html, preloadedState) => {
  return
  <!DOCTYPE html>
  <html>
    <head>
      <base href="/" />
      <title>Grocery List SSR</title>
    </head>
    <body>
      <div id="app">${html}</div>
      <script>
      window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(
        /</g,
        '\\u003c'
      )}
      </script>
      <script type='text/javascript' src="/public/bundle.js"></script>
      </body>
    </html>
}

----- функция для рендеринга и ответа на запрос get

const handleRender = (req, res) => {
  const store = createStore(rootReducer);
  const preloadedState = store.getState();
  const html = renderToString(
    <Provider store={store} >
    <App />
  </Provider>
  );
  res.send(renderFullPage(html, preloadedState));

}

---- вызов дескриптора render при первоначальном запросе get

app.use('/', handleRender);

app.listen(port, (err) => {
  if (err) {
    console.log(err);
  } else {
    console.log(`running on ${port}`);
  }
});

----- файл index.js

const preloadedState = window.__PRELOADED_STATE__;
delete window.__PRELOADED_STATE__;`

const store = createStore(rootReducer, preloadedState);`

hydrate(<Provider store={store}>
  <App />
 </Provider>,
  document.getElementById('app'));

Я ожидал, что пакет отправит и увлажнит HTML.Вместо этого я получил сообщение об ошибке в консоли Chrome.

Когда я запускаю код с узлом в режиме отладчика, я вижу, что начальные запросы get были успешными и что handleRender запустилось.Затем производится звонок на /public/bundle.js.Но это не похоже на статику.`

 express:router dispatching GET /public/bundle.js +41ms
  express:router query  : /public/bundle.js +0ms
  express:router expressInit  : /public/bundle.js +1ms
  express:router trim prefix (/public) from url /public/bundle.js +0ms
  express:router serveStatic /public : /public/bundle.js +0ms
  express:router logger  : /public/bundle.js +2ms
  express:router handleRender  : /public/bundle.js +1ms
GET /public/bundle.js 200 665 - 2.171 ms

Извините, если это больше кода, чем нужно.Первый раз.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...