Uncaught DOMException: Failed to execute 'insertBefore' on 'Node'

[boris-petrov]

Ember 3.18.1, Ember CLI 3.18. After fixing the other issue that the plugin didn't work for co-located templates, I started getting a lot of those:

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at DOMChangesImpl.insertBefore (http://localhost:4200/assets/vendor.js:59300:14)
    at DOMChangesImpl.insertAfter (http://localhost:4200/assets/vendor.js:59569:12)
    at ListBlockOpcode.evaluate (http://localhost:4200/assets/vendor.js:63786:13)
    at UpdatingVM.execute (http://localhost:4200/assets/vendor.js:63571:16)
    at RenderResultImpl.rerender (http://localhost:4200/assets/vendor.js:63865:10)
    at RootState.render (http://localhost:4200/assets/vendor.js:22578:36)
    at runInAutotrackingTransaction (http://localhost:4200/assets/vendor.js:66230:9)
    at http://localhost:4200/assets/vendor.js:22871:59
    at inTransaction (http://localhost:4200/assets/vendor.js:60577:9)
    at InteractiveRenderer._renderRoots (http://localhost:4200/assets/vendor.js:22845:37)

I can't seem to be able to narrow it down. It generally happens after a transition. And then when I refresh the page on that route, it doesn't happen. But refreshing on the "previous" one and then transitioning causes the error.

Any ideas where do I begin looking?

[Turbo87]

since the addon doesn't perform any changes at runtime and only changes whitespace at buildtime, I'm not sure if/how this can be related 🤔

[boris-petrov]

Well, I haven't seen this error ever and now it's happening all the time. 😄 I'm positive this plugin is the cause. If you have no ideas - I can try creating a reproduction at some point?

[boris-petrov]

@Turbo87 - I spent a horrible amount of time creating a reproduction. Please check it out! 😄 Run the app, open the browser, it will blow up. Remove ember-hbs-minifier from package.json, rerun the app, it won't blow up. Note that the fix mentioned in the other issue is not needed for some reason.

Please ask if you don't understand parts of the code (and you need to). It's a bit involved - I couldn't make it break with anything less than that (and I tried hard).

[patsy-issa]

I believe this is related, @boris-petrov your reproduction no longer fails if you use {{#in-element}} instead of the private invocation, you might need to install the ember-in-element-polyfill depending on your version of ember.

[boris-petrov]

@patsy-issa - thanks for the response and support!

However, I'm not seeing what you're saying. I install ember-in-element-polyfill, change -in-element to in-element, run the app, and the same error is in the console - NotFoundError: Node.insertBefore: Child to insert before is not a child of this node. Happens both on this reproduction and on my own app (which uses Ember 3.19). Am I missing something?

[patsy-issa]

@boris-petrov could you push the changes to the repro ^^

[patsy-issa]

I tried to run the reproduction again from a fresh install and it worked out of the box without the polyfill even O.o

@boris-petrov could you clear your cache, tmp, dist and see if it works for you?

[boris-petrov]

@patsy-issa - thanks again!

I pushed a commit installing and using ember-in-element-polyfill. Note that the error is in the console - the app "works" but there is a JavaScript error in the developer's tools. Happens both with and without ember-in-element-polyfill.

[boris-petrov]

@patsy-issa, @Turbo87 - hi, did you manage to check out the reproduction? Just clone the repo, npm install, ember serve, visit http://localhost:4200/ and check out the browser's console - you'll see the error there - Uncaught DOMException: Node.insertBefore: Child to insert before is not a child of this node. Removing ember-hbs-minifier from package.json and running ember serve again fixes the issue (and shows two times 123 which is correct - when using ember-hbs-minifier only one is shown - I guess because of the error).

[patsy-issa]

Hmm taking a look at the reproduction's code will need a bit more time to debug it, I believe it is an issue of using in-element with a div that is created but not appended to the body

[boris-petrov]

OK, I updated the reproduction to use Ember 4.3.0 and ember-hbs-minifier 1.0.0 - still the same issue appears. If someone could debug it... :)