Svelte: TypeError: Illegal invocation on transition

[henrikhermansen]

Hi!

After bumping Svelte from 3.4.2 a part of my code broke. It's broken for me on both 3.4.3 and 3.4.4.

I made a REPL which unfortunately fails to replicate the bug. I do hope, however, that providing my code might help identify the bug.

The bug happens when I click on "Expand". The same thing happens if I flip showForm to true in Form.svelte and click "Add" or "Cancel".

What happens when I do that in my app, is that the slide out transition works fine, but the slide in of the other part of the if-block in Form.svelte doesn't work. Not only does it not slide in, it doesn't appear at all.

Stack trace

Uncaught (in promise) TypeError: Illegal invocation
at loop (internal.js:107)
at go (internal.js:772)
at Object.run (internal.js:819)
at Object.o (Form.svelte:158)
at Object.p (Form.svelte:221)
at update (internal.js:577)
at flush (internal.js:552)

Form.svelte line 158

o(local) {
if (default_slot && default_slot.o) default_slot.o(local);

        if (!div1_transition) div1_transition = create_bidirectional_transition(div1, slide, {}, false);
        div1_transition.run(0); // line 158

        current = false;
    },

Form.svelte line 221

p(changed, ctx) {
var previous_block_index = current_block_type_index;
current_block_type_index = select_block_type(ctx);
if (current_block_type_index === previous_block_index) {
if_blocks[current_block_type_index].p(changed, ctx);
} else {
group_outros();
on_outro(() => {
if_blocks[previous_block_index].d(1);
if_blocks[previous_block_index] = null;
});
if_block.o(1); // line 221
check_outros();

            if_block = if_blocks[current_block_type_index];
            if (!if_block) {
                if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
                if_block.c();
            }
            if_block.i(1);
            if_block.m(div, null);
        }
    },

Code formatting didn't work too well in details, but I hope it helps.

Svelte 3.4.3/3.4.4
parcel-bundler 1.12.3
parcel-plugin-svelte 3.0.1
Chrome 74.0.3729.169

[johman10]

I'm having the same issue! Since I'm just experiencing it in a small codebase I created a codesandbox with an example:

Check the console of the browser to see the error mentioned.

[johman10]

Opened the linked PR that seems to fix this issue. Need some test coverage to prevent the case in the future but might help the project forward at least a little.

[arggh]

Hope to get the fix merged soon, as this issue is breaking my transitions too!

[johman10]

@arggh @henrikhermansen I found that you can downgrade to v3.4.2 (npm install [email protected]) to fix this issue until a fix has been merged.

[simeydotme]

Hi, I just lost an afternoon to this issue thinking I had made a mistake using the spring() methods, but it seems that since 3.4.3 there's an issue with the invocation context (exports !== window) inside the update loop during spring animations where the raf() method runs.

I also could not get it to reproduce in the REPL, but I have it isolated in CodeSandbox;
https://codesandbox.io/s/svelte-raf-invocation-error-yl4or <- 3.4.3 with invocation error
https://codesandbox.io/s/svelte-raf-invocation-error-h27dn <- 3.4.2 without invocation error

I hope these are acceptable as reduced test cases, it's the best I could do. I also found this seemingly related StackOverflow response; https://stackoverflow.com/a/9678166/1121532

---

[simeydotme]

Thanks so much @johman10 @Conduitry et al for the swift responses and resolution! 👏🙇‍♀