Closed Lenni009 closed 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.
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!
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.
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:
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