`hydration_mismatch` warning in Svelte 5

Author: tiehfoodCreated Jan 21, 2025Updated May 3, 2025

NumberFlow version

@number-flow/[email protected]

Framework version

[email protected]

Describe the bug and the steps to reproduce it

I have values

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

which could change depending on data loaded on the page.

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

Using

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

results in the hydration_mismatch warning

Minimal reproduction (greatly appreciated)

No response