bug: Error with adoptedStyleSheets in Angular 18 and Ionic project about ionic-framework HOT 6 CLOSED

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.