I'm working in a project that uses:

• react/[email protected]
• @loadable/ponent
• styled-ponents
• react-router-dom

The application renders both server side and client side.

I'm using @loadable/ponent to dynamically code split this way.

router.tsx

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

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

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

export default routes

When loading the page, this error appear on the console and the page seems to flick for a second.

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

When I check the output in both sides (server/client), they are identical.

When I remove @loadable/ponent like bellow, it works and the error is gone.

router-without-loadable.tsx

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

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

export default routes

Seems to be something to do with @loadable/ponent but I'm not 100% sure.

I'm working in a project that uses:

• react/[email protected]
• @loadable/ponent
• styled-ponents
• react-router-dom

The application renders both server side and client side.

I'm using @loadable/ponent to dynamically code split this way.

router.tsx

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

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

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

export default routes

When loading the page, this error appear on the console and the page seems to flick for a second.

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

When I check the output in both sides (server/client), they are identical.

When I remove @loadable/ponent like bellow, it works and the error is gone.

router-without-loadable.tsx

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

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

export default routes

Seems to be something to do with @loadable/ponent but I'm not 100% sure.

• javascript
• reactjs
• react-router-dom
• server-side-rendering
• loadable-ponent

• @loadable is used for SSR meaning your pages are piled at server side and sent as HTML to client side – Rikin Commented Aug 30, 2019 at 11:16
• Yes, well the HTML is not send to the client, is sent to the browser as a response. But yeah my problem is along the lines of dynamic imports. – Alejandro Garcia Anglada Commented Aug 30, 2019 at 11:22

2 Answers 2

Finally have an answer for this:

1. For @loadable/ponent to work properly, you need to put the magic webpack ment (/* webpackChunkName: "notfound" */) before the path of the file this way.

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

Reference:

https://github./smooth-code/loadable-ponents/issues/23

2. And more important, in the server side, you need to wrap you app in a ChunkExtractorManager and pass the client extractor (I was passing the server extractor, it's not very clear in the docs).

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>

Here is a proper clear example on how to implement it:

https://github./iamssen/seed

Update 24.09.2019

Added to the official docs

https://www.smooth-code./open-source/loadable-ponents/docs/server-side-rendering/#chunkextractor-entrypoints

I think the problem is your NotFound ponent is not loaded and thus Route dont know what to render which is causing the error.

You would need to modify something like below:

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