Rendering the page results in hydration_mismatch in svelte

[tiehfood]

NumberFlow version

@number-flow/[email protected]

Framework version

[email protected]

Describe the bug and the steps to reproduce it

I have values

let total: number = $state(0);
let flows: Flow[] = $state([]);

which could change depending on data loaded on the page.

    function setTotal() {
        let sum = flows.reduce((accumulator, currentFlow) => accumulator + currentFlow.amount, 0);
        total = Math.round((sum + Number.EPSILON) * 100) / 100
    }

Using

<NumberFlow plugins={[continuous]} format={{ style: 'currency', currency: 'EUR', trailingZeroDisplay: 'stripIfInteger' }} value={total} />

results in the hydration_mismatch warning

Minimal reproduction (greatly appreciated)

No response

[barvian]

Hi, could you try adding a locales prop to your component e.g. locales="en-US"? And if that doesn't work, could you provide a reproduction URL?

[tiehfood]

It doesn't work for me. Here is a simple page:

<script lang="ts">
    import "../app.css";
    import { Card } from "flowbite-svelte";
    import { onMount } from "svelte";
    import NumberFlow from "@number-flow/svelte";

    type Item = {
        name: string;
        amount: number;
    };

    let items: Item[] = $state([]);
    let total: number = $state(0);

    onMount(async () => await getItems())

    async function getItems() {
        items = [{"name": "test", "amount": 10}];
        setTotal();
    }

    function setTotal() {
        let sum = items.reduce((accumulator, currentItem) => accumulator + currentItem.amount, 0);
        total = Math.round((sum + Number.EPSILON) * 100) / 100;
    }
</script>

<Card >
    <p>Total</p>
    <NumberFlow format={{ style: 'currency', currency: 'EUR' }} value={total} />
</Card>

[barvian]

I can confirm I see this warning in newer versions of SvelteKit. I'll look into a workaround (open to suggestions). The hydration mismatch is due to NumberFlow using declarative shadow DOM with a custom element under the hood, and I try to keep all the DSD logic out of the client bundle for size reasons. React and Vue both let you suppress hydration warnings so hopefully Svelte has something similar 🤔

[llama-for3ver]

Not to be that guy, but anything on this?

[barvian]

Hi, I've looked through the Svelte 5 docs but I don't see a way to disable this hydration warning. Open to suggestions! @tiehfood and @llama-for3ver, NumberFlow is still working correctly for you, other than the console warning?

[tiehfood]

Despite the warning it's working fine

[llama-for3ver]

Ditto. It's no more than an annoyance.