carta icon indicating copy to clipboard operation
carta copied to clipboard

Components cause hydration html changed warning

Open KaylaSolace opened this issue 7 months ago • 5 comments

hello, I have a simple component that should console.log something when it is hovered just for testing, however none of it's javascript gets loaded to the client version of the page when loaded, and the console says

[svelte] hydration_html_changed
The value of an `{@html ...}` block near node_modules/​carta-md/​dist/​Markdown.svelte:47:0 changed between server and client renders. The client value will be ignored in favour of the server value
https://svelte.dev/e/hydration_html_changed client.js:2949:15

the component works in the <MarkdownEditor> if typed manually but not if loaded as part of the initial value, or when loaded as either pre-rendered or via <Markdown>, causing the aformentioned error

I am a tad confused as to how I am supposed to use components perhaps, but this issue even happens when I simply try to replace a h1 with the standard svelte('h1', TestComponent) system :(

KaylaSolace avatar May 16 '25 22:05 KaylaSolace

I'm not sure I understood the issue correctly. However, I think I've fixed it while working on #164 . Try updating carta-md and let me know!

BearToCode avatar May 18 '25 20:05 BearToCode

:tada: This issue has been resolved in version carta-md-v4.10.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] avatar May 18 '25 20:05 github-actions[bot]

Hydration issue has in fact been fixed! thank you!

the javascript on hover effect I have does not work still, but this is definitely an improvement!

for context: pre-rendered, loading the file with :test[1]

<span onmouseenter={() => {console.log('a')}}>test</span>

does not log 'a' in the console when hovered, nor does a console.log in the

KaylaSolace avatar May 19 '25 01:05 KaylaSolace

does not log 'a' in the console when hovered, nor does a console.log in the

Uhmm I think you lost some content 👀

BearToCode avatar May 19 '25 20:05 BearToCode

Ah, yes I forgot to include the script block, but it's simply just or so. Apologies for the email reply, I am away from work at the moment ^^'Basically, I may be misunderstanding, but the JavaScript I put in my components only seem to run when previewed in the markdowneditor component, and not when rendered on a viewer. On May 19, 2025, at 13:08, Davide @.***> wrote: BearToCode left a comment (BearToCode/carta#165)

does not log 'a' in the console when hovered, nor does a console.log in the

Uhmm I think you lost some content 👀

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>

KaylaSolace avatar May 19 '25 20:05 KaylaSolace