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

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

Closed
3 tasks done
scotch83 opened this issue Sep 8, 2024 · 16 comments · Fixed by #29869
Labels

Comments

@scotch83
Copy link

scotch83 commented Sep 8, 2024

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:

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

@ionitron-bot ionitron-bot bot added the triage label Sep 8, 2024
@TangierDreams
Copy link

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

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/core@4.19.2 and Ionic Framework v8.2.5: #29681 (comment)

@brandyscarney brandyscarney added the ionitron: needs reproduction a code reproduction is needed from the issue author label Sep 9, 2024
Copy link

ionitron-bot bot commented Sep 9, 2024

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.

@ionitron-bot ionitron-bot bot removed the triage label Sep 9, 2024
@scotch83
Copy link
Author

scotch83 commented Sep 10, 2024

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/core@4.19.2 and Ionic Framework v8.2.5: #29681 (comment)

@scotch83
Copy link
Author

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

@JayTailor45
Copy link

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

@brandyscarney brandyscarney added triage and removed ionitron: needs reproduction a code reproduction is needed from the issue author labels Sep 10, 2024
@tanner-reits
Copy link
Member

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

masonicboom commented Sep 12, 2024

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

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

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/core@8.3.1-dev.11726258029.1014159b
@ionic/react@8.3.1-dev.11726258029.1014159b
@ionic/angular@8.3.1-dev.11726258029.1014159b
@ionic/vue@8.3.1-dev.11726258029.1014159b

@masonicboom
Copy link
Contributor

masonicboom commented Sep 14, 2024

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/core@8.3.1-dev.11726258029.1014159b
@ionic/react@8.3.1-dev.11726258029.1014159b
@ionic/angular@8.3.1-dev.11726258029.1014159b
@ionic/vue@8.3.1-dev.11726258029.1014159b

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.

github-merge-queue bot pushed a commit that referenced this issue Sep 16, 2024
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
@tanner-reits tanner-reits reopened this Sep 16, 2024
@scotch83
Copy link
Author

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.

brandyscarney pushed a commit that referenced this issue Sep 17, 2024
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
@tanner-reits
Copy link
Member

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

masonicboom commented Sep 17, 2024

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

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

Copy link

ionitron-bot bot commented Oct 24, 2024

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Oct 24, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants