Poor Keyed Each performance and Uncaught TypeError

[scallaway]

Honestly not sure if this is still a bug or some piece of logic that I'm not understanding but I'm stuck between a rock and a hard place! Also, apologies for the long post but I wanted to get as much detail in here as possible.

Versions

"svelte": "^3.23.1"

Premable setup

I have a large (5000+ item) array that I have filtering functionality for through standard JS array filtering etc. The rendering of the items is a non-issue as I have conditional scroll logic.

I am try to conditionally show a simple i tag within a custom component that is being used to render each item.

For example, I have the following block in my Item component:

{#if item.isPromotion}
	<i ... />
{/if}

Nothing too complex. (Note, the filtering works fine without this if/else block).

I then have my iteration over the array of items through the following:

{#each items as item, itemIndex}
	<Item {item} {itemIndex} />
{/each}

The Problem

If I add in the if/else block, then I receive the following error when I try to filter the array:

Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null

The research that I have done mostly leads to information relating to Sapper etc. but I am not using that here. The one fix that I found that does work is from here which involves changing code within node_modules and I'm not wanting to do that - at least not for the time being.

---

The thought I had following this error was that Svelte wasn't able to work out which child should be removed from the view when it runs detach so I tried a few various keys including the full item object, and an individual key string added to each item itself.

This fixes the initial error that I was seeing, however the performance for filtering the array itself is very bad. With keypress events (which I use for filtering) taking nearly half a second each.

I'm guessing this is due to Svelte having to iterate over the array each time to work out what needs to be removed based on the keys, but I'm wondering if there is a simpler solution that I could employ.

Any information on this would be absolutely fantastic. More than happy to provide more information if it's needed.

Thanks!

[antony]

Can you create a REPL to demonstrate the problem?

[nickolasgregory]

This {#each items as item, itemIndex} is not keyed.
Could you try {#each items as item, itemIndex (itemIndex)}

[scallaway]

Can you create a REPL to demonstrate the problem?

Sure, I'll try and get that working to provide an example.

This {#each items as item, itemIndex} is not keyed.
Could you try {#each items as item, itemIndex (itemIndex)}

Yes I have tried that, sorry I wasn't explicit in the initial post. That is what results in the poor performance (and my assumption about the looping).

[martonlederer]

I'm getting the same error. I navigate to a specific page (/app/all-transactions) and I get an error from the previous route (/app), saying the exact same thing.
Repo: https://github.com/useverto/verto
Error:

VM9796:118 Uncaught (in promise) TypeError: Cannot read property 'children' of null
    at removeNode (<anonymous>:118:31)
    at Object.block.d (<anonymous>:280:11)
    at destroy (LatestTransactions.svelte:136)
    at updateProfile (<anonymous>:49:7)
    at Object.block.d (<anonymous>:283:9)
    at destroy_component (index.mjs:1396)
    at destroy (app.svelte:28)
    at updateProfile (<anonymous>:49:7)
    at Object.block.d (<anonymous>:283:9)
    at destroy_component (index.mjs:1396)

[antony]

We would need an isolated reproduction to do anything about this issue.

The error you are both listing usually relates to the dom being modified outside Svelte's control, and predictably, Svelte can't unmount things which no longer exist.

Please create an isolated reproduction of the issue in the REPL so that we can see the issue you are encountering.

[arggh]

FYI: As strange as it sounds, I believe a bad version of Chrome was giving me this same error just 5 minutes ago: #5290 (comment)

I was scratching my head for two hours. I hadn't touched the project for three weeks, it worked when I left for vacation, now it didn't when I came back. I tried resetting everything, building everything from scratch, clearing all caches etc...

Then I tried to reproduce the bug with Firefox, but couldn't. The same with Safari, Brave etc...

When I updated Chrome to latest, the bug disappeared.

[dummdidumm]

Closing due to inactivity and because no reproducible was given.