Svelte 5: effect_update_depth_exceeded about svelte HOT 6 CLOSED

Simplified REPL. Edit: Rune version.

Workaround is referencing in the action destroyer a local copy of the editor:

    const onMount: Action = (element: Element) => {
        editor = new Editor({ element, extensions: [Document, Paragraph, Text] });
        const local = editor;
        return {
            destroy() {
                // this gets called 603 times until Svelte gives up
                console.log("destroying")
                // comment this line to fix it - why does this cause the #key block in the parent to infinitely loop,
                // even tho `extensionGroups` doesn't change?
                local.destroy()
            },
        }
    }

from svelte.

Can you create a minimal reproduction? Most likely you are updating some value in an effect without untracking it.

from svelte.

This is pure Svelte 4 code - no runes (such as effects) are used.

I've been digging for hours now and I've found this code:

let extensionGroups: Extensions
$: {
    extensionGroups = richText
        ? { marks: true, lists: true, align: true, links: true, limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }
        : { limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }
    // this value is then used in a `{#key}` block.
    console.log("RichText:", richText)
}

This prints "RichText: true" exactly twice before the effect_update_depth error appears. However, replacing it with a non-reactive const:

const extensionGroups: Extensions = richText
    ? { marks: true, lists: true, align: true, links: true, limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }
    : { limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }

Fixes the issue. Additionally, the issue does not appear when client-side navigating to the page, only when loading it directly.

I'll keep digging and come back when I have a decent reproduction.

from svelte.

This is pure Svelte 4 code - no runes (such as effects) are used.

I've been digging for hours now and I've found this code:

let extensionGroups: Extensions
$: {
    extensionGroups = richText
        ? { marks: true, lists: true, align: true, links: true, limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }
        : { limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }
    // this value is then used in a `{#key}` block.
    console.log("RichText:", richText)
}

This prints "RichText: true" exactly twice before the effect_update_depth error appears. However, replacing it with a non-reactive const:

const extensionGroups: Extensions = richText
    ? { marks: true, lists: true, align: true, links: true, limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }
    : { limit: 2000, placeholder: "Write card...", shiftEnterNewline: true }

Fixes the issue. Additionally, the issue does not appear when client-side navigating to the page, only when loading it directly.

So it's probably something related to the reactive block (which under the hood is converted in an effect). Unfortunately without looking at the whole code (or better a minimal reproduction in the REPL) it's difficult to understand what.

from svelte.

Finally, I managed to get a reproduction: stackblitz.

Open the console and look at the messages. You'll see that destroying is printed over 100 times. It's not enough to cause the error, but running the example locally instead of Stackblitz make it reach over 600 calls, which is enough to trigger the error:

With Svelte 4, same Stackblitz (change svelte version in package.json and add vitePreprocess() in config), instead it's only called 2 times, instead of 603.

from svelte.

Wow, insane work! I thought it might have something to do with Tiptap updating the DOM. Thanks a lot for the clean REPL, and for the workaround! Updating the original post for clarity.

from svelte.