bug: app.component.html:1 ERROR NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. about ionic-framework HOT 15 OPEN

I'm also seeing this with Ionic version 8.3.0. I haven't traced everything that's happening, but from a cursory glance it looks like ionic-team/stencil#5933 touched https://github.com/ionic-team/stencil/blob/9ca8951d529efb4926467775f939c305ac07874b/src/runtime/styles.ts#L124, but the exception we now see is coming from https://github.com/ionic-team/stencil/blob/9ca8951d529efb4926467775f939c305ac07874b/src/runtime/styles.ts#L108.

I can trigger this type of error in Chrome, like this:

1. Open the developer console on this Github issue page.
2. body = document.getElementsByTagName('body')[0]
3. meta = document.getElementsByTagName('meta')[0]
4. div = document.createElement('div')
5. body.insertBefore(div, meta)

The line in question in Stencil is (styleContainerNode as HTMLElement).insertBefore(styleElm, referenceNode);.

That suggests that the exception is happening because at https://github.com/ionic-team/stencil/blob/9ca8951d529efb4926467775f939c305ac07874b/src/runtime/styles.ts#L108, referenceNode is not a child of styleContainerNode. It looks like all that code came in recently in ionic-team/stencil#5938.

In this code, if the second path of the ternary operator is taken, and the first <style> element does not exist within styleContainerNode, that would trigger the exception.

const preconnectLinks = styleContainerNode.querySelectorAll('link[rel=preconnect]');
const referenceNode =
  preconnectLinks.length > 0
    ? preconnectLinks[preconnectLinks.length - 1].nextSibling
    : document.querySelector('style');

I don't know enough about Stencil to know if that's possible. But what about changing it from document.querySelector('style') to styleContainerNode.querySelector('style')?

@tanner-reits does that help?

from ionic-framework.

I'm having the same problem with my app in Ionic/Angular. It only happens when I run my app in Chrome. If I run it in Firefox it works without error. No idea what's happening.

from ionic-framework.

Thank you for the issue! I was unable to reproduce this with the same versions listed in ionic info. I created a new app using the Angular standalone list starter.

Your ionic info says 8.3.0 but the StackBlitz example is using 8.0.0. Could you please try to update this version and verify that you are still seeing the problem?

This error should've been resolved by @stencil/[email protected] and Ionic Framework v8.2.5: #29681 (comment)

from ionic-framework.

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

from ionic-framework.

I did update the version on the stackblitz but maybe it is worth considering the other user saying this is happening only in Chrome. This is an issue happening in both versions of Angular Ionic (8.0.0 and 8.3.0) consider also marking packages in package.json with ^ normally will install the latest compatible version based on semver, so anything between >=8.0.0 and <9.0.0

If I look in my local project, which is the same as pushed to stackblitz, I also see it is set as ^8.0.0, and this is the project from which I got the ionic info log. The environment should be the same, but I updated it to be sure as you requested.

Thank you for the issue! I was unable to reproduce this with the same versions listed in ionic info. I created a new app using the Angular standalone list starter.

Your ionic info says 8.3.0 but the StackBlitz example is using 8.0.0. Could you please try to update this version and verify that you are still seeing the problem?

This error should've been resolved by @stencil/[email protected] and Ionic Framework v8.2.5: #29681 (comment)

from ionic-framework.

on safari npm start is failing and not running the app 🤔

from ionic-framework.

I can verify that I face the same issue with Chrome. For Brave and Safari, it is working for me.

from ionic-framework.

Hey all, I'm also not having any luck reproducing the issue. I spun up a new app using the Ionic CLI and tested in Chrome, Safari, and Firefox. Also checked out the Stackblitz repro in each browser.

from ionic-framework.

I’m experiencing the same issue and would like to know if there has been any progress or solution to this. Could you please provide an update?

from ionic-framework.

Hey again everyone, I've created a dev build of Ionic using a build of Stencil with the change @masonicboom had suggested. This is kind of a shot in the dark as I still haven't been able to reproduce the issue with Ionic, but thought we'd give it a shot. If anyone can install the build and let us know if that resolves the issue, that would be awesome! The versions are as follows:

@ionic/[email protected]
@ionic/[email protected]
@ionic/[email protected]
@ionic/[email protected]

from ionic-framework.