Svelte 5 bug when moving mouse

ahmnot commented 1 month ago

Describe the bug

When using my mouse on a little ripple effect code, there is a delay which seems like it is caused by a Svelte 5 bug according to the console and the visual effect.

Reproduction

You can see the bug here: https://amethyst-brandie-63.tiiny.site/

You can reproduce the bug when taking this repo:

https://github.com/ahmnot/site-reve/tree/svelte5-bugged-moving-mouse

Then click on the top right rectangle and let the mouse pressed and move it.

Logs

It gives this in the console locally:

chunk-Q3CUMGH2.js?v=beb6efec:1258 Uncaught TypeError: Cannot read properties of undefined (reading 'prev')
    at reconcile (chunk-5ZWPK7YF.js?v=beb6efec:663:25)
    at chunk-5ZWPK7YF.js?v=beb6efec:562:7
    at update_reaction (chunk-Q3CUMGH2.js?v=beb6efec:1275:23)
    at update_effect (chunk-Q3CUMGH2.js?v=beb6efec:1393:21)
    at process_effects (chunk-Q3CUMGH2.js?v=beb6efec:1503:11)
    at flush_queued_root_effects (chunk-Q3CUMGH2.js?v=beb6efec:1433:9)
    at process_deferred (:5173/node_modules/.vite/deps/chunk-Q3CUMGH2.js?v=beb6efec:1465:3)TypeError: Cannot read properties of undefined (reading 'prev')
    at reconcile (chunk-5ZWPK7YF.js?v=beb6efec:663:25)
    at chunk-5ZWPK7YF.js?v=beb6efec:562:7
    at update_reaction (chunk-Q3CUMGH2.js?v=beb6efec:1275:23)
    at update_effect (chunk-Q3CUMGH2.js?v=beb6efec:1393:21)
    at process_effects (chunk-Q3CUMGH2.js?v=beb6efec:1503:11)
    at flush_queued_root_effects (chunk-Q3CUMGH2.js?v=beb6efec:1433:9)
    at process_deferred (chunk-Q3CUMGH2.js?v=beb6efec:1465:3)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 52.87 GB / 63.89 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.113)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.195

Severity

annoyance

trueadm commented 1 month ago

Interesting, it seems that we don't account for the array being empty here:

https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/internal/client/dom/blocks/each.js#L343

@Rich-Harris Is this as simple as checking the length of matched isn't 0?

trueadm commented 1 month ago

I've upgraded to the latest version of Svelte and can't seem to repro this in your repository anymore. Can you confirm it's also fixed for you?

brunnerh commented 1 month ago

That is one of the errors you can inconsistently get with transitions as mentionend here, by the way. (It's still possible with the reproduction in that issue.)

trueadm commented 1 month ago

That is one of the errors you can inconsistently get with transitions as mentionend here, by the way. (It's still possible with the reproduction in that issue.)

This isn't making use of Svelte transitions or animations though, it's purely CSS.

Rich-Harris commented 2 weeks ago

I can't reproduce this error (though I did get a separate each_key_duplicate error — needed to make each ripple.id unique). Perhaps it's been fixed already?

trueadm commented 2 weeks ago

I can't reproduce either, so closing for now.

sveltejs / svelte