search

imzbf / md-editor-v3

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
https://imzbf.github.io/md-editor-v3
MIT License
1.6k stars 156 forks source link

Hydration mismatch when used with SSR #479

Closed Lenni009 closed 7 months ago

Lenni009 commented 7 months ago

Describe the issue

When using Server Side Rendering, or when pre-rendering pages with tools like VitePress, there is a hydration mismatch on pages that contain the markdown editor.

This is most notable with the theme prop, which is always light on pageload, regardless of what is actually set (when using a dynamic prop).

To reproduce:

  1. Go to the reproduction URL noted below
  2. If the page is not already dark mode, click on the theme toggle on the top right of the page to make it dark mode
  3. Click on another link on that page, for example "community page"
  4. Click the "back button" of your browser
  5. See the editor being dark
  6. Reload the page
  7. See the editor turning white, while everything else is dark.
  8. Open your browser console -> hydration mismatch error

If there is something that makes this component incompatible with SSR, it would be great to have that noted in the readme.

Procedure version

md-editor-v3: v4.12.2; NodeJS: 20.11.0; Firefox: 124.0; Chrome: 123.0

Reproduction link

Website: https://eisvana.github.io/about/community/create Component Code: https://github.com/Eisvana/eisvana.github.io/blob/main/components/PlayerPageForm.vue

imzbf commented 7 months ago

This is not a problem with the component. When you try adding this piece of code <div :class="theme === 'dark' ? 'dark' : 'light'">123123</div> to the page, the class attribute of the div on the page also defaults to 'light'. It seems to be an issue with the environment.

Lenni009 commented 7 months ago

But that only explains the theme issue. It doesn't explain why there's a hydration mismatch error whenever the MdEditor component is present in the template. The error is always there, regardless of the props passed to the editor. The only way to get rid of the error is to either remove the component, or to load it on the clientside.

So this is clearly a component error.

As I said before, if you can't fix this, it should at least be noted in the readme that the component is not compatible with SSR.

Thanks!

imzbf commented 7 months ago

Thank you for your feedback, but the point of the example given earlier is to demonstrate that it's Vue Server-Side Rendering (SSR) which needs to address this issue, rather than it being an issue with the application component itself.