DevtoolsOptions in react-router-devtools using JSX from solid-js breaking className props

[alexgladd]

Which project does this relate to?

Router

Describe the bug

TanStackRouterDevtools DevtoolsOptions in @tanstack/react-router-devtools appears to be loading JSX from a Solid JS dependency instead of React. See:

router/packages/react-router-devtools/src/TanStackRouterDevtools.tsx

Line 6 in 0e37676

import type { JSX } from 'solid-js'

This appears to be causing an issue where the DevtoolsOptions.toggleButtonProps property (and probably other properties based on the JSX import referenced above) has a class prop instead of the normal React className prop.

As a workaround, changing to class indeed resolves my error, but it's awkward in a React project.

Your Example Website or App

https://github.com/PraxisAppDev/llm-service/actions/runs/14743876169/job/41387440020

Steps to Reproduce the Bug or Issue

1. Using @tanstack/react-router-devtools@1.117.1
2. Try to mount devtools in floating mode with custom styles applied to the toggle button (see below)
3. Run a build using something like Vite tsc -b && vite build

<TanStackRouterDevtools
  initialIsOpen={false}
  position="bottom-right"
  toggleButtonProps={{ className: "right-16" }}
/>

The build fails with error:

Object literal may only specify known properties, and 'className' does not exist in type 'ButtonHTMLAttributes'

Expected behavior

Devtools mounts with the specified class name(s) applied to the toggle button.

Screenshots or Videos

See example build failure here: https://github.com/PraxisAppDev/llm-service/actions/runs/14743876169/job/41387440020

Error originates here: https://github.com/PraxisAppDev/llm-service/blob/a4553f9b5499d6075208325bc1f4c9e9815f5d84/ui/src/routes/__root.tsx#L44

Platform

• OS: macOS / M2 Pro
• Browser: Chrome
• Version: 135.0

Additional context

No response

[adomasa]

Up, I'm dealing with the same issue. Thanks for the reference on how to resolve it

[schiller-manuel]

cc @birkskyum

[birkskyum]

The TanStackRouterDevtools are written in SolidJS, and used in All fremeworks, react/solid/vue/svelte/angular. As a result the values that are fed into the devtools are for a solid component, which is why the JSX type from solid is used to make this typesafe, to guide towards using class rather than className.

It would require a lot of code duplication to make the devtools UI in each framework, to allow for passing in e.g. className for react, so for the time being, this is expected behavior, with the solid JSX type correctly flagging attempts to pass in className to a solid component.