Comments (6)
I believe I have located the source of the issue. The version of stencil/core that ionic relies on appears to be the issue. Apparently this happens if you run the app in an iFrame (like when testing with karma), unclear if it is also the case in other situations.
For me, adding , "peerDependencies": { "@stencil/core": "4.18.1" }
to my package.json fixed the issue.
It seems the issue first appears in @stencil/core 4.18.2
from ionic-framework.
Thank you @ConnorBrennan for confirming this issue. I would also like to ask if you could like the bug report so that it gets more attention. I can confirm that the proposed workaround prevents the error from occurring. I look forward to an official fix. I have the impression that Stencil, in general, is a huge blocker when it comes to keeping up with the latest Angular versions.
from ionic-framework.
I ran into a similar issue. After upgrading from ionic v7 to v8 some of my jest unit tests are broken:
TypeError: Cannot read properties of undefined (reading 'includes')
at includes (node_modules/@stencil/core/internal/client/index.js:663:82)
at addStyle (node_modules/@stencil/core/internal/client/index.js:674:20)
at attachStyles (node_modules/@stencil/core/internal/client/index.js:1472:5)
at updateComponent (node_modules/@stencil/core/internal/client/index.js:1462:38)
at fn (node_modules/@stencil/core/internal/client/index.js:1464:88)
at enqueue (node_modules/@stencil/core/internal/client/index.js:1462:10)
at Array.dispatchHooks (node_modules/@stencil/core/internal/client/index.js:1426:26)
at consume (node_modules/@stencil/core/internal/client/index.js:2990:16)
at consume (node_modules/@stencil/core/internal/client/index.js:3032:5)
at apply (node_modules/zone.js/bundles/zone.umd.js:1828:43)
at _ZoneDelegate.apply [as invokeTask] (node_modules/zone.js/bundles/zone.umd.js:445:37)
at ZoneImpl.invokeTask [as runTask] (node_modules/zone.js/bundles/zone.umd.js:195:51)
at runTask (node_modules/zone.js/bundles/zone.umd.js:527:38)
at call (node_modules/zone.js/bundles/zone.umd.js:516:52)
at apply (node_modules/zone.js/bundles/zone.umd.js:1810:36)
at invokeTheCallbackFunction (node_modules/jsdom/lib/jsdom/living/generated/Function.js:19:26)
at runAnimationFrameCallbacks (node_modules/jsdom/lib/jsdom/browser/Window.js:603:13)
at Timeout.<anonymous> (node_modules/jsdom/lib/jsdom/browser/Window.js:581:11)
The above mentioned Workaround with the older stencil Version 4.18.1 is fixing the issue for me.
I created a repository with code-example here: https://github.com/Floscho2402/ionic-8-jest-issue
from ionic-framework.
I am experiencing the same issue on Angular 15. While I can run my app successfully, attempting to run unit tests (jasmine/karma) results in the abovementioned error
Ionic Info
Ionic:
Ionic CLI : 7.1.1 (C:\Users\505449\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.8.6 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules@ionic\angular)
@angular-devkit/build-angular : 15.2.11 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules@angular-devkit\build-angular)
@angular-devkit/schematics : 15.2.11 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules@angular-devkit\schematics)
@angular/cli : 15.2.11 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules@angular\cli)
@ionic/angular-toolkit : 11.0.1 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules@ionic\angular-toolkit)
Capacitor:
Capacitor CLI : not installed
@capacitor/android : not installed
@capacitor/core : 5.4.0 (C:\Users\505449\Dev\DenverGov\denverdesign\angular\node_modules@capacitor\core)
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v22.1.0 (C:\Program Files\nodejs\node.exe)
npm : 10.7.0
OS : Windows 10
from ionic-framework.
Hey everyone 👋 appreciate the issue and workarounds posted to help out others facing this issue. That's what makes this community awesome! I spoke with the Stencil team and they have isolated the changes causing this regression.
I'll track this issue as external to Stencil. The Ionic Framework team will follow up with a dev-build or a resolution when a new build is available.
Thanks!
from ionic-framework.
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.
from ionic-framework.
Related Issues (20)
- bug: Breaking of react types with ionic elements
- bug: ion-label adds an empty comment as its first child, breaking SolidJS integration HOT 4
- bug: ion-item click event emitted two times (with ion-checkbox)
- feat: ion-alert add a slot for full customization HOT 5
- bug: Naive Input Radio Button not working as expected HOT 1
- bug: ion-item click event emitted two times (with ion-input) HOT 1
- bug: Dismissing a LoadingController will cause a swiper Slide flicks back to initial slide when swiping and using showing and then dismissing an Ionic Spinner while loading data HOT 2
- bug: conditional appearance of the content of an ion-item prevent click on right and left edge of the ion-item (with checkbox) HOT 7
- bug: ion-fab hidden under keyboard on Chrome Android but shows on top of keyboard on Firefox Android HOT 2
- ion-modal
- bug: ModalController componentProps support for input signals HOT 4
- bug: Accessibility issue: Backdrop in ion-popover component has invalid aria-hidden value HOT 15
- bug: Ion-Segment has layout error in Ion-Content with ion-padding HOT 4
- feat: Add a lines property to ion-select so that we can customise the lines of the ion-item within the ion-select
- bug: Blank-screen while launching app on iOS 16
- bug: Ion-datetime can't select next year HOT 2
- bug: vue, memoryRouter + tapping tab while inside nested route does nothing
- bug: ion-range emit value 'NaN' when dragging to the far left end of the screen when the browser is full screen
- bug: ionViewWillEnter triggered incorrectly
- bug: refresher icon broken on angular standalone
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.