-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
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. #29848
Comments
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. |
Thank you for the issue! I was unable to reproduce this with the same versions listed in Your This error should've been resolved by |
Thanks for the issue! This issue has been labeled as 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. |
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 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
|
on safari npm start is failing and not running the app 🤔 |
I can verify that I face the same issue with Chrome. For Brave and Safari, it is working for me. |
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. |
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:
The line in question in Stencil is That suggests that the exception is happening because at https://github.com/ionic-team/stencil/blob/9ca8951d529efb4926467775f939c305ac07874b/src/runtime/styles.ts#L108, In this code, if the second path of the ternary operator is taken, and the first
I don't know enough about Stencil to know if that's possible. But what about changing it from @tanner-reits does that help? |
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? |
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:
|
I tried just upgrading the I can try launching an update with this build embedded but it will take a little time. |
Issue number: resolves ionic-team/stencil-ds-output-targets#476, resolves ionic-team/stencil-ds-output-targets#475, resolves #29848 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> In v0.6.0 of the [React output target](https://www.npmjs.com/package/@stencil/react-output-target), the implementation was changed to leverage Lit's utility for creating React components from web components. This introduced some unforseen issues and breaking changes. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Reverts many of the changes from #29782 to downgrade the React output target package to the last stable version (v0.5.3) - Downgrades the version of Stencil to v4.20.0 (due to ionic-team/stencil#5983 causing problems with the downgraded output target) - Pins these versions and prevents Renovate from attempting to upgrade until the associated issues are resolved ## Does this introduce a breaking change? - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build for this version: `8.3.1-dev.11726167750.15400355` I tested the dev build against the use cases outlined in ionic-team/stencil-ds-output-targets#475 and ionic-team/stencil-ds-output-targets#476
unfortunately I try with the builds you have released for testing and yet it doesn't work. |
Issue number: resolves ionic-team/stencil-ds-output-targets#476, resolves ionic-team/stencil-ds-output-targets#475, resolves #29848 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> <!-- Please describe the current behavior that you are modifying. --> In v0.6.0 of the [React output target](https://www.npmjs.com/package/@stencil/react-output-target), the implementation was changed to leverage Lit's utility for creating React components from web components. This introduced some unforseen issues and breaking changes. <!-- Please describe the behavior or changes that are being added by this PR. --> - Reverts many of the changes from #29782 to downgrade the React output target package to the last stable version (v0.5.3) - Downgrades the version of Stencil to v4.20.0 (due to ionic-team/stencil#5983 causing problems with the downgraded output target) - Pins these versions and prevents Renovate from attempting to upgrade until the associated issues are resolved - [ ] Yes - [X] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build for this version: `8.3.1-dev.11726167750.15400355` I tested the dev build against the use cases outlined in ionic-team/stencil-ds-output-targets#475 and ionic-team/stencil-ds-output-targets#476
Thanks. I'll test 8.3.1 in our next release and report back. Possibly related: I've been seeing a ton of |
Looks like that fixed it. I haven't seen the exception crop up since deploying with Ionic 8.3.1. |
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Prerequisites
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:
Further investigation
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
ionic start test-app
npm start
from the app root directorylocalhost:4200
(nothing appears, only a black screen)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'
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'
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
The text was updated successfully, but these errors were encountered: