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.