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 svelte@3.4.2) 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! 👏🙇‍♀