Next.js: Did not expect server HTML to contain a <span> in <div> using redux-saga

[francisrod01]

Examples bug report

Example name

with-redux-saga:
https://github.com/zeit/next.js/tree/canary/examples/with-redux-saga

Describe the bug

I receive the content from serve and show on the screen but the console shows a red warning with the exactly text rendered by redux.

To Reproduce

I have a real demo on CodeSandbox:
https://codesandbox.io/s/y16j84949

Expected behavior

I expect a correct rendering in server and client.

Screenshots

System information

• OS: Linux debian 3.16.0-6-amd64 #1 SMP Debian 3.16.57-2 (2018-07-14) x86_64 GNU/Linux
• Browser : chrome Version 69.0.3497.100 (Official Build) (64-bit)
• Version of Next.js: 1.0.3

[rusyurchenko]

I have a similar issue: Did not expect server HTML to contain a <span> in <span>. I'm not using redux-saga. The following warning show only in Safari.

Browser: Safari Version 12.0 (14606.1.36.1.9)
Next.js version: 7.0.2

[drex44]

Hi, @francisrod01 this warning is given by react. It is because your app is somehow initially rendering a different tree on the client vs the server. you can read about it here on stackoverflow.

The warning is due to the call to the store.dispatch in getInitialProps. Somehow it results in two different nodes on server and client. due to this react identifies it as different node and could not compare it properly for updation.

One solution I found is to set the initial store value for translation instead of an empty object. I forked and have set the initial value in this codesandbox. It resolves this warning.

This issue is somewhat different but will help you understand better,
https://github.com/facebook/react/issues/10879.

[mfix22]

@timneutkens this can be closed as the error is no longer shown in the the with-redux-saga example

[sayjeyhi]

In my case it was because of using PersistGate and react-loadable. if you using this libraries, you could use preloadAll instead of preloadReady