bertho-zero/react-redux-universal-hot-example

Missing "data-reactroot" attribute causes error message

qeterlee opened this issue · 0 comments

Hi @bertho-zero,

first of all thank you for this nice boiler plate. Until now it is working well. However, lately we added the package react-localize-redux and since then we are encountering the error:

Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.

On the server side we are using the following code to include this package into SSR:

const component = (
      <Loadable.Capture report={moduleName => modules.push(moduleName)}>
        <Provider store={store} {...providers}>
          <LocalizeProvider store={store} >
            <ConnectedRouter history={history}>
              <ReduxAsyncConnect routes={routes} store={store} helpers={providers}>
                {renderRoutes(routes)}
              </ReduxAsyncConnect>
            </ConnectedRouter>
          </LocalizeProvider>
        </Provider>
      </Loadable.Capture>
    );

We checked that with "<LocalizeProvider store={store} >" the server side rendered code is identical to without it. Only difference with "<LocalizeProvider store={store} >" is that in the first child <div> of "<div id="content"> the attribute "data-reactroot" is missing.

Is it ok to change the following code in src/client.js:
if (!dest || !dest.firstChild || !dest.firstChild.attributes || !dest.firstChild.attributes['data-reactroot']) {
to:
if (!dest || !dest.firstChild || !dest.firstChild.attributes) {

It also seems that "data-reactroot" is an implementation detail that is deprecated now.