SolidJS•2d ago

All of a sudden `classList` is typed as string | undefined

I am using SolidJS with Astro and at one point I duplicated a component file to extract logic into it and now class and classList have unexpected types:

src/Wes95/components/Window.tsx:159:14 - error ts(2322): Type '{ children: Element[]; class: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Property 'class' does not exist on type 'HTMLAttributes<HTMLDivElement>'.

159         <div class="WindowTitleButtons">

src/Wes95/components/Window.tsx:159:14 - error ts(2322): Type '{ children: Element[]; class: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Property 'class' does not exist on type 'HTMLAttributes<HTMLDivElement>'.

159         <div class="WindowTitleButtons">

src/Wes95/components/Window.tsx:128:7 - error ts(2322): Type '{ Window: true; '-active': boolean; '-maximized': boolean | undefined; '-minimized': boolean | undefined; }' is not assignable to type 'string'.

128       classList={{
          ~~~~~~~~~

src/Wes95/components/Window.tsx:128:7 - error ts(2322): Type '{ Window: true; '-active': boolean; '-maximized': boolean | undefined; '-minimized': boolean | undefined; }' is not assignable to type 'string'.

128       classList={{
          ~~~~~~~~~

The reference is node_modules/.pnpm/[email protected]/node_modules/solid-js/types/jsx.d.ts and it does only contain:

  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // ...
    classList?: string | undefined;

  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // ...
    classList?: string | undefined;

What's going on?!

31 Replies

Jasmin•2d ago

where do you try to apply classList on?

WesOP•2d ago

HTML:

    <section
      classList={{

    <section
      classList={{

Jasmin•2d ago

weird

Jasmin•2d ago

I'm also on 1.9.3 I think your typescript server is confusing stuff. Do you use the solid jsx in tsconfig?

WesOP•2d ago

Do you mean "jsxImportSource": "solid-js",?

Jasmin•2d ago

yeah and "jsx": "preserve",

WesOP•2d ago

Yeah The code is on GitHub: https://github.com/WesSouza/wes.dev/blob/wes95/src/Wes95/components/Window.tsx#L126

Jasmin•2d ago

and a restart didn't work? ok lemme test

WesOP•2d ago

no, and running tsc --noEmit shows the same errors

Jasmin•2d ago

tsc works for me too rm -rf node_modules maybe that helps (gives other errors but none related to that)

WesOP•2d ago

what the heck, that worked?!

Jasmin•2d ago

silly node modules

WesOP•2d ago

I thought we were done with nuking node modules 😦

Jasmin•2d ago

my muscle memory always puts a rm -rf before anything that I do haha, I'm trusting nothing nope, never

WesOP•2d ago

so like, a vite cache issue maybe?

Jasmin•2d ago

probably not tsc doesn't do anything with vite I literally have this script in every package.json

"clean": "rm -rf .turbo dist node_modules"

"clean": "rm -rf .turbo dist node_modules"

and I always to pnpm clean && pnpm install && pnpm build if I'm having issues or am about to push just to double check that it works on not only my machine

WesOP•2d ago

I didn't reinstall anything so it must be some sort of cache shenanigans Anyway... thanks 😛

Jasmin•2d ago

hm could be, caching do be annyoing sometimes :D np! :zzz_flushedfroge:

Neto•2d ago

the whole editor <-> tsc <-> eslint combo is just iffy when shits gets bad editor acuses an issue, tsc not, eslint is just slow

Jasmin•2d ago

eslint is just slow haha yeah sounds about right I tried biome for a few new projects now and it's like day and night. sadly it doesn't support everything I need yet but I'm looking forward to it it has partial support for .astro, but not yet formatting them :/

WesOP•2d ago

I'm excited for voidzero, last time I tried Rome it was a bunch of petty rules, and it drove me insane it also crashed a lot, which I'm sure is better nowadays

Neto•2d ago

the rome disaster

Jasmin•2d ago

who is rome?

WesOP•2d ago

Biome's previous incarnation

Jasmin•2d ago

ohh

Neto•2d ago

rome was voidzero before the whole vc thingy rome got some millions to "fix the js ecosystem" or at least part of it as you don't know them can you guess what happened? :ryan:

Jasmin•2d ago

:deepseacreature: the js ecosystem can never be "fixed"

Neto•2d ago

everyone has opinions about everything and if you have strong enough opinions, you create your own formatter xD

WesOP•2d ago

the people behind voidzero are not the same, so there's some hope

Neto•2d ago

yeah

Gaming

Programming

All of a sudden `classList` is typed as string | undefined