Comments (15)
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:
- Open the developer console on this Github issue page.
body = document.getElementsByTagName('body')[0]
meta = document.getElementsByTagName('meta')[0]
div = document.createElement('div')
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
says8.3.0
but the StackBlitz example is using8.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.
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.
from ionic-framework.
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.
from ionic-framework.
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.
from ionic-framework.
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"
.
from ionic-framework.
Looks like that fixed it. I haven't seen the exception crop up since deploying with Ionic 8.3.1.
from ionic-framework.
Related Issues (20)
- bug: Alerts/dialog messages cannot be modified using any aria overrides
- bug: aria-label ignored on ion-select-option when using TalkBack
- feat: Extend ion-range CSS shadowparts for individual knob styling with dualKnobs active
- bug: IonInput default autocapitalize value disrespects system keyboard settings and relevant browser defaults
- bug: ion-refresher functionality broken in React + console error HOT 4
- bug: popover arrow changes after scroll to the end of the page
- bug: Inputs with icons are strange
- bug: ion-segment-buttons activating improperly after opening contextmenu (right mouse click) on Mac HOT 1
- feat: Show popover on text input without click event HOT 1
- bug: FocusManagerPriority, unable to navigate to previously clicked link
- bug: ion-tab-bar is not working when used as a standalone Vue component after the v8.3.0/v8.3.1 update HOT 1
- bug: Ionic cap run fails with error "Invalid target ID: ?"
- feat: Add "keyboard-showing" class to ion-app or app-root
- bug: App within ion-router-outlet not properly mounted with vue test-utils
- feat: allow slot on ion-select-option
- bug: Ionic Gesture - mismatched gesture details in the last onMove handler and the onEnd handler.
- bug: Extraneous Non-Props Attributes Passed to <ion-menu> Component Cannot Be Inherited
- bug: Unintended Voiceover Output in Default ion-select Popup
- bug: radio on android TV not working as expected
- bug: ionic-core and ionicons use different stencil versions which results in bundle warning
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic-framework.