React 16 + React router 4 + Redux + Webpack 4 + Babel 7 + SSR

💬 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

[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 … "

[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