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.

[scotch83]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When creating a new app using the CLI, using angular standalone, run npm start, nothing is shown in the browser and the console shows this error:

core.mjs:7397 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.
    at addStyle (index.js:858:34)
    at attachStyles (index.js:887:20)
    at index.js:1705:5
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:17:1)
    at asyncToGenerator.js:22:1
    at new ZoneAwarePromise (zone.js:2702:25)
    at asyncToGenerator.js:14:1
    at updateComponent (index.js:1699:20)

Further investigation

1. removing all the html generated code does not show the error.
2. removing only the ion-app shows the error but also show the page

It feels like there is something wrong in the IonApp component

Expected Behavior

The app is shown in the browser and no error appears in the console

Steps to Reproduce

1. run ionic start test-app
2. run npm start from the app root directory
3. open the browser and navigate to localhost:4200 (nothing appears, only a black screen)
4. open also the console pressing F12 to see the error

Code Reproduction URL

https://stackblitz.com/~/github.com/scotch83/test-ionic-angular-standalone

Ionic Info

ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   - /Users/scotch-83/.nvm/versions/node/v22.6.0/lib/node_modules/@ionic/cli/lib/project/index.js
   - /Users/scotch-83/.nvm/versions/node/v22.6.0/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/scotch-83/.nvm/versions/node/v22.6.0/lib/node_modules/@ionic/cli/index.js
   - /Users/scotch-83/.nvm/versions/node/v22.6.0/lib/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

   Require stack:
   - /Users/scotch-83/.nvm/versions/node/v22.6.0/lib/node_modules/@ionic/cli/lib/project/index.js
   - /Users/scotch-83/.nvm/versions/node/v22.6.0/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/scotch-83/.nvm/versions/node/v22.6.0/lib/node_modules/@ionic/cli/index.js
   - /Users/scotch-83/.nvm/versions/node/v22.6.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.2.0 (/Users/scotch-83/.nvm/versions/node/v22.6.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.3.0
@angular-devkit/build-angular : 18.2.3
@angular-devkit/schematics : 18.2.3
@angular/cli : 18.2.3
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : not installed
@capacitor/core : 6.1.2
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v22.6.0 (/Users/scotch-83/.nvm/versions/node/v22.6.0/bin/node)
npm : 10.8.2
OS : macOS Unknown

Additional Information

Ionic info did not find information about my mac:

MacOS Sonoma 14.5

Chip: Apple Silicon M2 Pro

[TangierDreams]

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.

[brandyscarney]

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)

[ionitron-bot]

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.

[scotch83]

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)

[scotch83]

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

[JayTailor45]

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

[tanner-reits]

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.

[masonicboom]

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?

[deny-joefakri]

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?

[tanner-reits]

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]

[masonicboom]

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]

I tried just upgrading the @ionic/react dependency which broke my app, but using that same build number for @ionic/react-router as well worked. Meaning, it ran for me. I don't personally have a repro case for this either, just some exception reports in the wild.

I can try launching an update with this build embedded but it will take a little time.

[scotch83]

unfortunately I try with the builds you have released for testing and yet it doesn't work.
It is so strange that this is happening only on my side and you cannot reproduce it, to me it happens all the times with the repo I have added here, I can consistently reproduce it. I am available for screen sharing and investigation if you want, but can't do more than this. I figure out there is something wrong with the stencil library but I could not really find out what.

[tanner-reits]

Hey all. We've reverted the version of Stencil used in the v8.2.9 and v8.3.1 releases of Ionic Framework as a temporary solution to this issue until we can investigate further.

[masonicboom]

Thanks. I'll test 8.3.1 in our next release and report back.

Possibly related: I've been seeing a ton of Make sure you use: <ion-refresher slot="fixed"> warnings in the JS console despite setting slot="fixed".

[masonicboom]

Looks like that fixed it. I haven't seen the exception crop up since deploying with Ionic 8.3.1.