TypeError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot'

[munkk]

Hello, has anyone faced this issue?

Uncaught TypeError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'.

To Reproduce
Steps to reproduce the behavior:

1. Git clone
2. npm i
3. npm run start

Node version: 16.20 .
Browser: Chrome.
Branch: main / next

[muratcorlu]

Which Chrome version did you experience this on? I couldn't see the same error on Chrome 114.

[muratcorlu]

Ah, I just noticed "Chrome 113" in the screenshot. Do you still have this issue? @munkk

[umutbozdag]

Hi @muratcorlu, I have the same issue in both Chrome and Microsoft Edge. I think it's not related to browser itself.
My chrome version is: 119.0.6045.160

Do you have an idea how can I fix this?

[fchevallieratecna]

Hi everyone,

I'm encountering the same error as described. To provide more insights, this issue occurs exclusively on Windows systems and specifically when the build is performed on Windows.

Interestingly, the error appears only within the stories and not the documentation files. It also seems to be unrelated to Storybook, as the same issue arises in the Playground environment following a Windows build.

I hope this additional information helps in diagnosing the problem.

[fchevallieratecna]

I'm still investigating.

The error occurs in @lit/reactive-element/css-tag.js

caused by the line

s5.adoptedStyleSheets = o12.map((t8) => t8 instanceof CSSStyleSheet ? t8 : t8.styleSheet);

I think it's here : https://github.com/lit/lit/blob/main/packages/reactive-element/src/css-tag.ts#L175-L177

[gethari]

I'm still investigating.

The error occurs in @lit/reactive-element/css-tag.js

caused by the line

s5.adoptedStyleSheets = o12.map((t8) => t8 instanceof CSSStyleSheet ? t8 : t8.styleSheet);

I think it's here : https://github.com/lit/lit/blob/main/packages/reactive-element/src/css-tag.ts#L175-L177

Hi yes, you are right, I am facing the same issue with vite+lit, by any chance did you get solution to this issue ?

[fchevallieratecna]

Hi, yes i found a workaround.

I moved all my css files to css.ts files

Then I did like this for the CSS :

import { css } from "lit";

export default css`
  :host {
    font-family: var(--font-family);

    --card-padding: var(--grid-gutter-compact) var(--grid-margin-comfy);
  }
  ...
`

Then in the component

[...]
import style from "./card.css";

@customElement("card")
export default class Card extends LitElement {
  static styles = style;
}