[Bug?]:TypeError: Cannot set properties of null (setting 'className')

[nbrugger-tgm]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

On any change that causes a reload (HMR) i get the error message Cannot set properties of null (setting 'className') at dev.js:166. I do not use className as jsx/tsx property.

Expected behavior 🤔

When i do a HMR change solid doesn't "crash" and displays the changes made to the sourcecode (unless there is an error in my code) OR throws an error message that i can fix

Steps to reproduce 🕹

Either see: https://stackblitz.com/edit/solidjs-templates-7xy2wh?file=src%2FApp.tsx and open preview in new tab

OR

1. Create a solid start project with TSX
2. copy paste the following snippet into the src/routes/index.tsx

import {createSignal} from "solid-js";

export default (props: { user: string | null }) => {
  const [open, setOpen] = createSignal(false);
  return (
    <a
      class={`border-base-140 border rounded-md absolute right-1.5 top-1.5 bg-base-80 flex align-middle items-center justify-around flex-col ${props.user == null ? "text-primary-dark" : "text-accent/60 hover:text-primary-dark/60"} animated-500 outline-0 hover:border-primary/30 hoverGlow hover:shadow-primary/10`}
      style="--ggs: 1.5"
      onClick={() => {
        if (props.user != null) setOpen(bool => !bool);
      }}
      onMouseLeave={() => setOpen(false)}
      href={props.user !== null ? undefined : "/auth"}
    >
      <div class="p-2 flex align-middle items-center justify-around cursor-pointer gap-2">
        <span>{props.user ?? "Login"}</span>
      </div>
      <div class={`flex-col flex w-full ${open() ? "":"hidden"}`}>
        <hr class="border-secondary m-0 p-0" />
        <div class="flex-col flex w-full gap-2 p-2">
          <a
            class="text-accent font-medium cursor-pointer hover:bg-black/20 hover:text-primary-dark/80 rounded p-1 animated-300"
            href="/deauth"
          >
            Logout
          </a>
          <a
            href="redacted"
            class="text-accent font-medium cursor-pointer hover:bg-black/20 hover:text-primary-dark/80 rounded p-1 animated-300"
          >
            Edit User
          </a>
        </div>
      </div>
    </a>
  );
};

4. go to the browser watch it working fine
5. change a line "Edit user" to "YOLO"
6. See the crash in the open tab

Context 🔦

There is not a lot to say - it crashes on every single change :(

I left so much code in the snippet above since i have no clue what triggers it and it would be very tedious to remove every class every attribute one by one

Upon inspecting it seems like the JSX transformed code is just wrong. lastSibling is used to access the <div class={flex-col flex w-full ${open() ? "fuk you i guess":"hidden"}}> node but well that returns null

Your environment 🌎

OS: Kubuntu 24.04.1 LTS x86_64
CPU: AMD Ryzen 7 PRO 4750U with Radeon Graphics (16) @ 1.700GHz

npm: 10.1.0
bun: 1.1.26 (tested with both npm/bun in isolation)

solid-start: 1.0.6

[nbrugger-tgm]

There is now a stackblitz reproducer https://stackblitz.com/edit/solidjs-templates-7xy2wh?file=src%2FApp.tsx and a solid ticket: #2279

[nbrugger-tgm]

The ticket in solid-js is more up to date and this is not related to solid-start itself