question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

server side rendering and client mismatch

See original GitHub issue

Current Scenario

Client and server checksum mismatch, i.e. client side hydration error.

Demo

https://codesandbox.io/s/remirror-ohwsv

Error:

Warning: Did not expect server HTML to contain a <div> in <div>.

Background

Looking at the docs, it isn’t entirely clear if server side rendering is supported.

But I saw that @remirror/core depends on https://github.com/ifiokjr/remirror/blob/6f1da7c8eadbfe05b376a800faa802837dbed5d5/%40remirror/react-ssr/src/remirror-ssr.tsx, which sort of insinuates that server side rendering might be supported.

However, as I tried to spin up the Next.js app above, a checksum mismatch error is shown.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
ifiokjrcommented, Jul 22, 2019

@cusxio New release with the suppressHydrationWarning prop will no longer show the warning.

https://codesandbox.io/s/remirror-suppresshydrationwarning-y65kv

0reactions
ifiokjrcommented, Jul 17, 2019

I’m not sure if this helps, but libraries like Draft.js and Slate uses suppressContentEditableWarning to mute the error above.

@cusxio It helps a lot! You know I should actually probably take time to read the React docs 😅

Read more comments on GitHub >

github_iconTop Results From Across the Web

Handling the React server hydration mismatch error
How to resolve the server mismatch error when hydrating a shared React component that can be used in client-side only or server-side rendered...
Read more >
React Server-side rendering error due to mismatch between ...
I am working on a React app (18.2.0 version to be exact), which uses server side rendering. On one of the pages, I...
Read more >
NextJS: server-side and client-side mismatch - Colin's Thoughts
Learn how to solve a mismatch between the server-side and client-side in NextJS.
Read more >
HTML Mismatch Server Side Rendering with React and Redux
HTML Mismatch Server Side Rendering with React and ReduxSubscribe ▻https://www.youtube.com/c/BeALearnerofficialSubscribe 2nd Channel ...
Read more >
Known Issues with Client-Side Rendering - Windows drivers
A printer driver mismatch exists when the client computer has a different version of the printer driver than the server has. Typically, when...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found