@loadable/ компонент не загружается при рендеринге на стороне сервера

Question

Загружаемый компонент в SSR не отображается на сервере, но отлично работает на стороне клиента. В моем основном контейнере верхний и нижний колонтитулы отображаются только на сервере, компонент с загружаемым файлом не загружается на сервер

версия реакции

"react": "^16.12.0" 
"react-router-config": "^1.0.0-beta.4", 
"react-router-dom": "^4.3.0", 
"react-router-redux": "^5.0.0-alpha.9"

server.js

<ChunkExtractorManager extractor={extractor}> 
    <Provider store={store}> 
      <StaticRouter location={location} context={context}> 
        <ReduxAsyncConnect routes={routes} /> 
      </StaticRouter> 
    </Provider> 
</ChunkExtractorManager>

Client.js

loadableReady(() => { 
         hydrate( 
            <Provider store={store}> 
              <ConnectedRouter history={history}> 
                <ReduxAsyncConnect routes={routes} /> 
              </ConnectedRouter> 
            </Provider>, document.getElementById('app') ); 
})

Также добавлен плагин Webpack. Файл stats.json создается со значениями хэша чанка. Что я здесь делаю не так?

Answer 1

Для загружаемых готовых компонентов внутри компонентов вашего приложения вы можете обернуть требуемый компонент поставщиками по вашему выбору:

import { loadableReady } from '@loadable/component'
loadableReady(() => {
  const root = document.getElementById('main')
  hydrate(<App />, root)
})

Для чанков:

import { renderToString } from 'react-dom/server'
import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server'
const statsFile = path.resolve('../dist/loadable-stats.json')
const extractor = new ChunkExtractor({ statsFile })
const html = renderToString(
  <ChunkExtractorManager extractor={extractor}>
    <YourApp />
  </ChunkExtractorManager>,
)
const scriptTags = extractor.getScriptTags()