Loadable-components: React 16 + React router 4 + Redux + Webpack 4 + Babel 7 + SSR

[lauterry]

💬 Questions and Help

Hello @neoziro

I try to make React Router 4 + React 16 + Redux + Loadable Components + Webpack 4 to work together but fail.

I start from your server side rendering example https://github.com/smooth-code/loadable-components/tree/master/examples/server-side-rendering.

In the following code from your example :

 const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
    const { default: App } = nodeExtractor.requireEntrypoint()

    const webExtractor = new ChunkExtractor({ statsFile: webStats })
    const jsx = webExtractor.collectChunks(<App />)

    const html = renderToString(jsx)

App is the same on client and on server side.

However, when using React Router + Redux, you need to wrap differently your App component depending you're on client side or server side :

client

import { Router } from "react-router-dom";
import { Provider } from "react-redux";

const initialState = window.__INITIAL_STATE__;
const store = createStore(reducers, initialState)

<Provider store={store}>
<Router>
     <App>
</Router>
</Provider>

server

import { StaticRouter } from "react-router";
import { Provider } from "react-redux";

const initialState = ...; // initial state is initialised from value from express req
const store = createStore(reducers, initialState)

<Provider store={store}>
<StaticRouter location={req.url}>
     <App>
</StaticRouter>
</Provider>

In my case, the code from your example does not work :

 const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
    const { default: App } = nodeExtractor.requireEntrypoint()

    const webExtractor = new ChunkExtractor({ statsFile: webStats })
    const jsx = webExtractor.collectChunks(<App />)

    const html = renderToString(jsx)

I can't figure out how to make them work together ?

Can you help me please ?

Best regards

[gregberge]

Hello @lauterry, I don't understand the exact cause of your problem. Having a different provider should not be a problem, just put it server-side.

[revskill10]

You can try to use this:
```js
import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';

const handler = (req, res) => {
const extractor = new ChunkExtractor({
statsFile: path.resolve(__dirname, 'loadable-stats.json'),
entrypoints: ['client'],
});
const markup = renderToString(


)
...
}

[lauterry]

Hi

I have finally made it.

Here is a repo https://github.com/lauterry/perfect-react-app which illustrate how loadable-components works with React 16 + React router 4 + Redux + Webpack 4 + Babel 7 + SSR + React-inl

@neoziro Do you mind having a look at my repo and tell me if you see anything weird or incorrect or anything I can make better please ?

Thx

[parties]

@lauterry link?

[lauterry]

Ooops I updated my comment with the link https://github.com/lauterry/perfect-react-app

[coloudman]

Can't use ReactDOM.hydrate in [React 16 + React router 4 + Redux + Webpack 4 + Babel 7 + SSR + React-inl] project?
When I changed render to hydrate, it logged warning : "Warning: Expected server HTML to contain a matching .. "