@ loadable / компонент не отображается на стороне сервера экспресс-приложения с React - PullRequest
Новая
       10

@ loadable / компонент не отображается на стороне сервера экспресс-приложения с React

0 голосов
/ 16 февраля 2019

Мы используем @ loadable-component, и у нас возникают проблемы при отображении их на стороне сервера.Проблема заключается в том, что макеты не отображают 

import { ChunkExtractor } from '@loadable/server';
app.get('/*', async (req, res) => {

const extractor = new ChunkExtractor({ statsFile });

const WrappedLayout = withRootQuery(withLayout(layouts));

const App = (
  <ApolloProvider client={client}>
    <StaticRouter context={context} location={req.url}>
      <WrappedLayout />
    </StaticRouter>
  </ApolloProvider>
);

renderToStringWithData(extractor.collectChunks(App))
  .then((content) => {
    if (context.url) {
      res.redirect(context.status ? context.status : 301, context.url);
      return;
    }
    const initialState = client.extract();
    const helmetData = Helmet.renderStatic();
    console.log(content);
    const html = (
      <Html
        content={content}
        state={initialState}
        helmetData={helmetData}
        linkTags={extractor.getLinkElements()}
        scriptTags={extractor.getScriptElements()}
        styleTags={extractor.getStyleElements()}
      />
    );
  })

export const withLayout = layouts => (props) => {
  // eslint-disable-next-line react/prop-types
  const { data, type } = props;
  let Layout;
  if (type) {
    Layout = getLayoutOfType(type, layouts);
  } else {
    Layout = getLayoutFromResponse(data, layouts);
  }
  console.log(Layout);
  return <Layout {...props} />;
};

export const layouts = {
    INDEX_PAGE: loadable(() => import('./components/atomic/templates/home')),
    ARTICLE: loadable(() => import('./components/atomic/templates/article')),
    BASIC_PAGE: loadable(() => import('./components/atomic/templates/page')),
    loading: loadable(() => import('./components/atomic/templates/loading')),
    notFound: loadable(() => import('./components/atomic/templates/not-found')),
    error: loadable(() => import('./components/atomic/templates/error-page')),
};

Макет, загруженный с помощью loadable, правильно отображается на клиенте, но не на сервере

...