Issue with Vite migrating from Vaadin v22 to Hilla 1.2.7

Hilla
1

Hi all,
We are migrating to Hilla 1.2.7 and trying to our project to work with Vite, but are seeing an error in the browser (Attached screenshot):

[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: ‘Reaction[When@18]’ TypeError: Failed to set the ‘adoptedStyleSheets’ property on ‘ShadowRoot’: Failed to convert value to ‘CSSStyleSheet’.

The error seems to come from the components that use scss.

In order for scss to work, we have added a types.d.ts file and included in our tsconfig file:
declare module ‘*.scss’ {
import { CSSResult} from ‘lit’;
const styles: CSSResult;
export default styles;
}

I saw this issue with Vite and CSS and wonder if it is related?:
https://github.com/vaadin/flow/issues/14142

2

Usually this works with webpack in our components:

import globalStyles from ‘Frontend/global-styles.scss’;

And then:

static get styles() {
return [globalStyles];
}

3

Yes, this is related. I guess this could be related to the fact that the plugin we use does not have .scss added to the "include" in the config.
As a result, SCSS files are not processed by the plugin, and instead handled by Vite, which ends up in the same problem as before

Please create a new issue in Flow, as this would probably require us to update the plugin config to support SCSS files

4

Thanks!
I have created the issue here:
https://github.com/vaadin/flow/issues/15058

5

Are there any workarounds until a fix is provided?