Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Regression after upgrading vertical-collection to v.3.1.0: Failed to execute 'removeChild' on 'Node' #397

Open
johanrd opened this issue Dec 6, 2022 · 4 comments
Open

Regression after upgrading vertical-collection to v.3.1.0: Failed to execute 'removeChild' on 'Node' #397

johanrd opened this issue Dec 6, 2022 · 4 comments

Comments

@johanrd
Copy link
Contributor

johanrd commented Dec 6, 2022

After upgrading to [email protected], and indirectly @html-next/[email protected], the following error has popped up in Sentry from time to time Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.:

This seemingly is related to _updateVirtualComponents in vertical-collection, and makes glimmer.js fail hard (with a frozen app) – see downstream error: glimmerjs/glimmer-vm#1401

The error is hard to reproduce, but when looking at the change log, PR #358 (Delete virtual element) might have something to do with it?

Any ideas on how to avoid this, @mixonic and @Atrue ?

Thanks,
See stack trace:

chunk.7517bb0a1711fc19bd5d.js:2 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at T (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:302419)
    at zt.deleteItem (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:351021)
    at zt.sync (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:350255)
    at zt.evaluate (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:349622)
    at Ft._execute (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:347903)
    at Ft.execute (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:347773)
    at Vt.rerender (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:351589)
    at ur.render (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:58397)
    at https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:61933
    at It (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:346077)
    at pr._renderRoots (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:61851)
    at pr._renderRootsTransaction (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:62211)
    at pr._revalidate (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:62679)
    at invoke (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:387307)
    at d.flush (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:386377)
    at p.flush (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:388157)
    at B._end (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:393242)
    at B.end (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:390333)
    at B._run (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:393756)
    at B.run (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:390877)
    at e.run (https://app.example.com/assets/vendor.d078e5cd96cd859465bb106f188b3f01.js:11:236863)
    at N._updateVirtualComponents (https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:29059)
    at N.update (https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:26180)
    at https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:26024
    at Array.<anonymous> (https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:228131)
    at Object.flush (https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:228395)
    at https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:228266
    at o (https://app.example.com/assets/chunk.7517bb0a1711fc19bd5d.js:2:516550)
o @ chunk.7517bb0a1711fc19bd5d.js:2
requestAnimationFrame (async)
(anonymous) @ chunk.7517bb0a1711fc19bd5d.js:2
_flush @ chunk.7517bb0a1711fc19bd5d.js:2
schedule @ chunk.7517bb0a1711fc19bd5d.js:2
schedule @ chunk.7517bb0a1711fc19bd5d.js:2
scheduleUpdate @ chunk.7517bb0a1711fc19bd5d.js:2
(anonymous) @ chunk.7517bb0a1711fc19bd5d.js:2
(anonymous) @ index.js:1524
e.untrack @ validator.js:814
get @ index.js:1523
r @ index.js:1050
Pe @ index.js:2014
(anonymous) @ reference.js:222
(anonymous) @ reference.js:170
e.track @ validator.js:798
m @ reference.js:169
(anonymous) @ index.js:4088
(anonymous) @ reference.js:170
e.track @ validator.js:798
m @ reference.js:169
(anonymous) @ index.js:4088
(anonymous) @ reference.js:170
e.track @ validator.js:798
m @ reference.js:169
(anonymous) @ reference.js:401
(anonymous) @ reference.js:170
e.track @ validator.js:798
m @ reference.js:169
evaluate @ runtime.js:2599
_execute @ runtime.js:5231
execute @ runtime.js:5212
rerender @ runtime.js:5580
render @ index.js:5395
(anonymous) @ index.js:5713
It @ runtime.js:5020
_renderRoots @ index.js:5692
_renderRootsTransaction @ index.js:5745
_revalidate @ index.js:5786
invoke @ backburner.js:351
flush @ backburner.js:241
flush @ backburner.js:447
_end @ backburner.js:999
end @ backburner.js:729
_run @ backburner.js:1054
_join @ backburner.js:1028
join @ backburner.js:779
(anonymous) @ index.js:5503
_trigger @ backburner.js:1123
_end @ backburner.js:1018
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_end @ backburner.js:1009
B._boundAutorunEnd @ backburner.js:648
Promise.then (async)
n @ backburner.js:28
flush @ index.js:45
_scheduleAutorun @ backburner.js:1218
_ensureInstance @ backburner.js:1206
ensureInstance @ backburner.js:961
scheduleRevalidate @ index.js:3863
dirtyTag @ validator.js:453
k @ validator.js:556
N @ index.js:575
F @ index.js:618
ke @ index.js:2154
Se @ index.js:2120
(anonymous) @ chunk.7517bb0a1711fc19bd5d.js:2
(anonymous) @ chunk.7517bb0a1711fc19bd5d.js:2
o @ chunk.7517bb0a1711fc19bd5d.js:2
@johanrd johanrd changed the title Regression after upgrading ember-table to 4.0.0: Failed to execute 'removeChild' on 'Node' Regression after upgrading vertical-collection to v.3.1.0: Failed to execute 'removeChild' on 'Node' Dec 6, 2022
@johanrd johanrd closed this as completed Dec 6, 2022
@johanrd johanrd reopened this Dec 6, 2022
@Atrue
Copy link
Contributor

Atrue commented Dec 7, 2022

Can you try the latest version of the vertical collection? There was a similar issue that was fixed after the 3.1.0 release.
#389

@johanrd
Copy link
Contributor Author

johanrd commented Dec 7, 2022 •
edited

@Atrue Ah, that is great news, thanks!

When scanning the release notes, I couldn't find it. I see now that it was part of v4.0.0 release. I suggest adding "Fix for detached Node element exception #389" to the v4.0.0 release notes.

I'd also suggest a patch release vertical-collecion: 3.1.1 which includes the fix of #389 (e.g. for users of ember-table 4.0).

@johanrd johanrd mentioned this issue Dec 7, 2022
Open
@johanrd
Copy link
Contributor Author

johanrd commented Dec 7, 2022 •
edited

Update: I was not able to create a meaningful PR for a v3.1.1 patch release (probably because there are no specific branch on the v3.1.0 tag). See v3.1.0...johanrd:vertical-collection:release-3.1.1 for a possible PR.

@IgnaceMaes
Copy link

Also experiencing this issue in ember-light-table v3.0.0-beta.1 which depends on "@html-next/vertical-collection": "^3.1.0". Having v3.1.1 released as patch would fix the issue.

@IgnaceMaes IgnaceMaes mentioned this issue Jan 3, 2023
Closed
@johanrd johanrd mentioned this issue Jun 29, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@johanrd @Atrue @IgnaceMaes