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.

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

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

Open
boris-petrov opened this issue May 7, 2020 · 11 comments
Open

Comments

@boris-petrov
Copy link
Contributor

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
Copy link
Collaborator

Turbo87 commented May 7, 2020

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
Copy link
Contributor Author

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
Copy link
Contributor Author

@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
Copy link

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
Copy link
Contributor Author

@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
Copy link

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

@patsy-issa
Copy link

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?

Screenshot 2020-06-25 at 21 28 30

@boris-petrov
Copy link
Contributor Author

@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
Copy link
Contributor Author

boris-petrov commented Oct 26, 2020

@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
Copy link

patsy-issa commented Oct 26, 2020

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
Copy link
Contributor Author

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... :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants