Update to 1.7.5 causes hydration to break

[Dmitri Bostan]

Hello!

I have a project built with ElderJS and Svelte. While running the yarn audit I saw that ElderJS uses a vulnerable version of Svelte (details).

I tried to update to ElderJS to 1.7.5 and Svelte to 3.49.0, but the hydration stopped working for some reason.

Is this behaviour expected?

Thanks in advance.

[Dmitry Smagin]

Could you be more specific?
I use 1.7.5 and hydration is NOT broken for me, thought there are certain issues.
If you use hydrate-options then you have to use 'json' style for its options:
hydrate-options={{ "loading": "eager", "preload": true }}

[Dmitri Bostan]

Yes, of course.

I did try to provide hydrate-options with hydrate-client, but I get the same behaviour.

So, I have a carousel component where slides are being passed by using hydrate-client.

Inside the component, I have the following logic:

<script>
import { onMount } from 'svelte';

let hydrated;

function prev() {
  console.log('PREV clicked')
}

function next() {
  console.log('NEXT clicked')
}

onMount(() => hydrated = true);
</script>

// IN THE HTML
  <nav>
    {#if hydrated}
      <svg viewBox="0 0 64 64" on:click={prev}>...</svg>
      <svg viewBox="0 0 64 64" on:click={next}>...</svg>
    {/if}
  </nav>

My issue is that hydrated variable never gets set to true, assuming onMount is not working as expected.
As an idea, I tried to remove the #if hydrated condition, but when clicking, the function would not be executed and I would not see the console.log.

Thank you in advance!

[Dmitri Bostan]

any updates on this?