Не ожидал, что серверный HTML будет содержать <div> в <main>

Question

Я работаю в проекте, который использует:

• react/react-dom@16.9.0
• @ Загружаемый / компонент
• стилизованных-компоненты
• реагируют-маршрутизатор-дом

Приложение работает как на стороне сервера, так и на стороне клиента.

я использую @loadable/component динамически разделить код таким образом.

router.tsx

import * as React from 'react'
import loadable from '@loadable/component'
import { Route, Switch } from 'react-router-dom'

const NotFound = loadable(() =>
  import('../components/NotFound/NotFound' /* webpackChunkName: "notfound" */)
)

const routes = (
  <Switch>
    <Route component={NotFound} />
  </Switch>
)

export default routes

При загрузке страницы эта ошибка появляется на консоли, и страница, кажется, мигает в течение секунды.

react-dom.development.js:546 Warning: Did not expect server HTML to contain a <div> in <main>.

Когда я проверяю вывод в обе стороны (сервер / клиент), они идентичны.

Когда я удаляю @loadable/component как и ниже, это работает, и ошибка исчезла.

маршрутизатор-без loadable.tsx

import * as React from 'react'
import { Route, Switch } from 'react-router-dom'
import NotFound from '../components/NotFound/NotFound'

const routes = (
  <Switch>
    <Route component={NotFound} />
  </Switch>
)

export default routes

Кажется, что-то делать с @loadable/component но я не уверен на 100%.

Answer 1

Наконец-то есть на это ответ:

1. За @loadable/component для правильной работы нужно поставить волшебный комментарий к веб-пакету (/* webpackChunkName: "notfound" */) перед путем к файлу таким образом.

const NotFound = loadable(() =>
  import(/* webpackChunkName: "notfound" */ '../components/NotFound/NotFound')
)

Ссылка:

https://github.com/smooth-code/loadable-components/issues/23

2. И что еще более важно, на стороне сервера вам нужно обернуть ваше приложение в ChunkExtractorManager и передать экстрактор клиента (я передавал экстрактор сервера, в документации это не очень понятно).

const statsFile = path.resolve('./wwwroot/dist/loadable-stats.json')
const extractor = new ChunkExtractor({ 
  statsFile, 
  entrypoints: ['client'] // name of the proper webpack endpoint (default: main)
})

<ChunkExtractorManager extractor={extractor}>
  <App />
</ChunkExtractorManager>

Вот наглядный пример того, как это реализовать:

https://github.com/iamssen/seed

Обновление 24.09.2019

Добавлено в официальную документацию

https://www.smooth-code.com/open-source/loadable-components/docs/server-side-rendering/

Answer 2

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

Вам нужно изменить что-то вроде ниже:

<Route path="/404/" exact component={props => <NotFound {...props} />} />