'EXPRESSION PRODUCES A UNION TYPE THAT IS TOO COMPLEX TO REPRESENT'

[AxeloLabs]

hello, I have many errors saying:
'EXPRESSION PRODUCES A UNION TYPE THAT IS TOO COMPLEX TO REPRESENT'

I also mention, that I do not have a tsconfig.json because, I have understood that Rich Harris recomendation was to use type system with JSDOC inside libs, si I do not know if I can use SMUI without TS ? And also, I am using VitePreprocessor, and not SveltePreprocessor because I am using vitest.

Do you know why ?

"@smui/button": "7.0.0-beta.12",
import Button, { Label } from '@smui/button';
<Button href={menu.url} ......

also no updated sample there, so I don t know if it is becoz I am using smui 7 with ts 5
https://github.com/hperrin/smui-example-sveltekit/blob/master/package.json

I think you did not have realized the migration to svelte 4 :(
Is that planned soonly ?

Tks

[phobetron]

I receive this error while using Typescript (5.1.3) and SvelteKit (1.20.4 Kit, 4.0.1 Svelte) together, built using Vite (as standard, nothing special) for several components:

• import IconButton from '@smui/icon-button';
• import Fab, { Icon } from '@smui/fab';
• import List, { Item, Separator } from '@smui/list';
• import { Icon, Label } from '@smui/button';

Additionally, I receive the following error in SMUI:

node_modules/@smui/menu/src/SelectionGroupIcon.ts:8:3
Error: Types of construct signatures are incompatible.
  Type 'new (options: ComponentConstructorOptions<{ getElement?: (() => HTMLSpanElement) | undefined; use?: ActionArray | undefined; class?: string | undefined; contextmenu?: string | null | undefined; ... 202 more ...; 'sveltekit:reload'?: true | ... 1 more ... | undefined; }>) => Graphic__SvelteComponent_' is not assignable to type 'new <Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>(options: ComponentConstructorOptions<Props>) => SvelteComponent<...>'.
    Construct signature return types 'Graphic__SvelteComponent_' and 'SvelteComponent<Props, Events, Slots>' are incompatible.
      The types of '$$prop_def' are incompatible between these types.
        Type '{ getElement?: (() => HTMLSpanElement) | undefined; use?: ActionArray | undefined; class?: string | undefined; contextmenu?: string | null | undefined; ... 202 more ...; 'sveltekit:reload'?: true | ... 1 more ... | undefined; }' is not assignable to type 'Props'.
          '{ getElement?: (() => HTMLSpanElement) | undefined; use?: ActionArray | undefined; class?: string | undefined; contextmenu?: string | null | undefined; ... 202 more ...; 'sveltekit:reload'?: true | ... 1 more ... | undefined; }' is assignable to the constraint of type 'Props', but 'Props' could be instantiated with a different subtype of constraint 'Record<string, any>'. 
  class: 'mdc-menu__selection-group-icon',
  component: Graphic,
});

[hperrin]

I have a fix for this, but it requires using tag="svg" again instead of component={Svg}. I hate to change it again, but at least it's easier.

[hperrin]

Ok, this is fixed in d1610c8.

[hperrin]

It seems it's still having this issue... jfc.

[hperrin]

Or maybe not, idk. Svelte's type system seems so fragile. Is anyone seeing this issue still in 7 beta 13?

[hperrin]

I figured it out! It took seven hours of trial and error, but I finally fixed it! But now I'm having a Manhattan with my dad, so I'll push the fix tomorrow.

[AxeloLabs]

hello, actually i always have the error, why you do not try svelte 4 ?

[AxeloLabs]

I think, there is two dinstincts eerors in this thread.
One is realated with SVG, and the other one with svelte 4.

with svelte 3.x.x, I do not have the union type error, mentioned in the title of this issue. But yes, I always have with svelte 3 and your latest bump, the svg error.

[hperrin]

Ok, this is now fixed in b26b1d4

[hperrin]

And if I push a new version and have to reopen this, you guys will hear me sighing from wherever you are in the world.

[AxeloLabs]

I am also hard fighting with SMUI :)
it is not related, but I have found that, smui-prepare, is kind of buggy, you have to call the main entry _smui-theme.scss to have it working

I am using turborepo with PNPM, the cd is also mandatory or I have kind of import not found...
I have followed this reco: #348 ... but unsuccessfully...
I had to call the file name _smui-theme.scss to have the compiulation and generation of the file in static/smui.css
and I also have to do the crazy cd... I didnt get the point with public-hoist-pattern[]=@material/* (but I did it also, and 2 hacks to have it working, the cd, and the filename"

"smui-theme-light": "cd ../.. && smui-theme compile apps/z-story-uiblog/static/smui.css -i apps/z-story-uiblog/src/themes -i ./node_modules",

[phobetron]

@hperrin during svelte-check, I still receive:

node_modules/@smui/menu/src/SelectionGroupIcon.ts:8:3
Error: Types of construct signatures are incompatible.
  Type 'new (options: ComponentConstructorOptions<{ getElement?: (() => HTMLSpanElement) | undefined; use?: ActionArray | undefined; class?: string | undefined; contextmenu?: string | null | undefined; ... 199 more ...; 'on:fullscreenerror'?: EventHandler<...> | ... 1 more ... | undefined; }>) => Graphic__SvelteComponent_' is not assignable to type 'new <Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>(options: ComponentConstructorOptions<Props>) => SvelteComponent<...>'.
    Construct signature return types 'Graphic__SvelteComponent_' and 'SvelteComponent<Props, Events, Slots>' are incompatible.
      The types of '$$prop_def' are incompatible between these types.
        Type '{ getElement?: (() => HTMLSpanElement) | undefined; use?: ActionArray | undefined; class?: string | undefined; contextmenu?: string | null | undefined; ... 199 more ...; 'on:fullscreenerror'?: EventHandler<...> | ... 1 more ... | undefined; }' is not assignable to type 'Props'.
          '{ getElement?: (() => HTMLSpanElement) | undefined; use?: ActionArray | undefined; class?: string | undefined; contextmenu?: string | null | undefined; ... 199 more ...; 'on:fullscreenerror'?: EventHandler<...> | ... 1 more ... | undefined; }' is assignable to the constraint of type 'Props', but 'Props' could be instantiated with a different subtype of constraint 'Record<string, any>'. 
  class: 'mdc-menu__selection-group-icon',
  component: Graphic,
});

[hperrin]

Ok. I'll look into that one soon. Thankfully it's something small.

[AxeloLabs]

hello
in the doc:
SMUI 7 (after v7.0.0-beta.9) is no longer compatible with Svelte 3. It now requires Svelte 4.

But, I have not seen in the SMUI repo, a package.json using svelte 4, but svelte 3.50.x
So my question, is, is there a way to be sure that the assert that it requires svelte 4 is tested, or demonstrated elsewhere in the SMUI repo ?

tks

[AxeloLabs]

I also do not understant ho to manage the imports of @material/xxxx
I mean I am doing them one by one, after each fail of the smui-theme command, saying:
formatted: "Error: Can't find stylesheet to import.\n" +
' ╷\n' +
"1 │ @use '@material/checkbox/mdc-checkbox';\n" +
' │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +

How should import all this list at once ?
"@material/base": "^14.0.0",
"@material/dom": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/banner": "^14.0.0",
"@material/card": "^14.0.0",
"@material/checkbox": "^14.0.0",
"@material/animation": "^14.0.0",
"@material/button": "^14.0.0",
"@material/circular-progress": "^14.0.0",
"@material/density": "^14.0.0",
"@material/dialog": "^14.0.0",
"@material/elevation": "^14.0.0",
"@material/focus-ring": "^14.0.0",
"@material/icon-button": "^14.0.0",
"@material/image-list": "^14.0.0",
"@material/linear-progress": "^14.0.0",
"@material/ripple": "^14.0.0",
"@material/rtl": "^14.0.0",
"@material/shape": "^14.0.0",
"@material/theme": "^14.0.0",
"@material/tokens": "^14.0.0",
"@material/top-app-bar": "^14.0.0",
"@material/touch-target": "^14.0.0",
"@material/typography": "^14.0.0",

[phobetron]

@nzaero Let's try and keep this issue focused. The other problem you're running into with style compilation isn't related.

[phobetron]

@hperrin has there been any movement on the remaining Svelte 4 svelte-check issues?

[phobetron]

@hperrin will Svelte 4 support in SMUI be finalized, or should SMUI be considered abandoned/no longer maintained?

[ihr-it-projekt]

i have the same problem with version 7.0.0-beta.15 when i run svelte check on my project

1694074059405 START "/app"
1694074069162 {"type":"ERROR","filename":"node_modules/@smui/menu/src/SelectionGroupIcon.ts","start":{"line":7,"character":2},"end":{"line":7,"character":11},"message":"Types of construct signatures are incompatible.\n Type 'new (options: ComponentConstructorOptions<{ getElement?: (() => HTMLSpanElement) | undefined; use?: ActionArray | undefined; class?: string | undefined; id?: string | null | undefined; role?: AriaRole | ... 1 more ... | undefined; ... 198 more ...; 'on:fullscreenerror'?: EventHandler<...> | ... 1 more ... | undefined; }>) => Graphic__SvelteComponent_' is not assignable to type 'new <Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>(options: ComponentConstructorOptions) => SvelteComponent<...>'.\n Construct signature return types 'Graphic__SvelteComponent_' and 'SvelteComponent<Props, Events, Slots>' are incompatible.\n The types of '$$prop_def' are incompatible between these types.\n Type '{ getElement?: (() => HTMLSpanElement) | undefined; use?: ActionArray | undefined; class?: string | undefined; id?: string | null | undefined; role?: AriaRole | null | undefined; ... 198 more ...; 'on:fullscreenerror'?: EventHandler<...> | ... 1 more ... | undefined; }' is not assignable to type 'Props'.\n '{ getElement?: (() => HTMLSpanElement) | undefined; use?: ActionArray | undefined; class?: string | undefined; id?: string | null | undefined; role?: AriaRole | null | undefined; ... 198 more ...; 'on:fullscreenerror'?: EventHandler<...> | ... 1 more ... | undefined; }' is assignable to the constraint of type 'Props', but 'Props' could be instantiated with a different subtype of constraint 'Record<string, any>'.","code":2419}
1694074069162 COMPLETED 1915 FILES 1 ERRORS 0 WARNINGS 1 FILES_WITH_PROBLEMS
~ $