Skip to content

bug: Incompatible with jsdom 27.1.0+ due to AdoptedStyleSheets check #6507

@gremlin896

Description

@gremlin896

Prerequisites

Stencil Version

4.36.0-4.40.0

Current Behavior

Importing @ionic/angular components (which depend on @stencil/core) in a testing environment using jsdom 27.1.0+ results in the following error:

TypeError: Cannot convert undefined or null to object
   node_modules/@stencil/core/internal/client/index.js:266:124
   node_modules/@stencil/core/internal/client/index.js:266:201

Expected Behavior

Tests should run without errors related to stencil

System Info

jsdom: 27.1.0 - 27.3.0 (tested)
@ionic/angular: 8.7.14
@stencil/core: (via Ionic dependency)
Test framework: Vitest

Stencil info output:
      System: node 24.12.0
    Platform: darwin (25.1.0)
   CPU Model: Apple M4 Pro (14 cpus)
    Compiler: node_modules/@stencil/core/compiler/stencil.js
       Build: 1759440611
     Stencil: 4.38.0 🎿
  TypeScript: 5.5.4
      Rollup: 4.34.9
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0

Steps to Reproduce

  1. Set up a test environment with:
  • jsdom 27.1.0 or higher (tested up to 27.3.0)
  • @ionic/angular (tested with 8.7.14)
  • @stencil/core (via Ionic dependency)
  • Vitest with jsdom environment
  1. Import an Ionic Angular component in a test file:
import { provideIonicAngular } from '@ionic/angular/standalone';   // or import any Ionic component
  1. Run the tests

In the attached reproduction repo, you can run npm test to see the issue occur after installing packages

Code Reproduction URL

https://github.com/gremlin896/stencil-jsdom-ionic-repro

Additional Information

The error occurs in

!!win.document && Object.getOwnPropertyDescriptor(win.document.adoptedStyleSheets, 'length')!.writable)()
and is failing due to win.document.adoptedStyleSheets being undefined.

This has always been undefined in jsdom, but this code was previously unreachable due to the supportsConstructableStylesheets evaluating to false due to new CSSStyleSheet().replaceSync being undefined.

Since jsdom@27.1.0 new CSSStyleSheet().replaceSync now results in a function, so supportsConstructableStylesheets evaluates to true - causing the supportsMutableAdoptedStyleSheets check to run and error.

A closed related issue on the jsdom repo can be found here jsdom/jsdom#3998

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bug: ValidatedThis PR or Issue is verified to be a bug within StencilHas WorkaroundThis PR or Issue has a work around detailed within it.Help Wanted

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions