Typing errors when using headlessui/react with preact

[kurtbuilds]

I'm getting type errors when working with @headlessui/react components. This is a repo to reproduce the issue: https://github.com/kurtbuilds/preact-headlessui-issue.git

I'm not sure if I've misconfigured typescript/preact/something else, or this is a bug in preact. It seems like the former, but I'm not sure.

Any ideas on how to resolve this? Description here:

---

I created a component Header that uses Disclosure from @headlessui/react:

export function Header() {
    return <Disclosure as="nav" className="border-b border-gray-200 bg-white">
        {({open}: { open: boolean }) => (
            <>
                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <div className="flex h-16 justify-between">
                        <MobileProfileButton open={open}/>
                    </div>
                </div>
            </>
        )}
    </Disclosure>;
}

However, typescript doesn't pass typechecking for this component, complaining that:

src/app.tsx:25:33 - error TS2322: Type 'string' is not assignable to type '(bag: DisclosureRenderPropArg) => string'.

25     return <Disclosure as="nav" className="border-b border-gray-200 bg-white">

Clearly, it should allow a string to be passed there.

[rschristian]

Your first issue seems to be that Disclosure does not take a className prop? Really poor error message there, but @headlessui/react's types look a bit funky.

After that though, you'll run into an issue where children is somehow expected to be Element (rather than the correct JSX.Element). Not quite sure what that's about, might be a bug in our types, but I can investigate more tomorrow.

[kurtbuilds]

I think the docs don't include className because className and as are assumed to exist on all headlessui components. Headlessui is a library that provides functionality with unrestricted APIs to configure the styling, so that functionality needs to exist on every component. If you run the project (npm run dev), you'll see that the element which looks like this:

<Disclosure as="nav" className="border-b border-gray-200 bg-white">
        {...}
</Disclosure>

gets rendered as

<nav data-headlessui-state="open" class="border-b border-gray-200 bg-white">
{...}
</nav>

Quickly looking at the types in the codebase, DisclosureProps includes the interface for Props, which includes ClassNameOverride, which is where the definition causing problem exists. See code here: https://github.com/tailwindlabs/headlessui/blob/076b03cf491629b1930531c4ca616902be6c1688/packages/%40headlessui-react/src/types.ts#L26

---

Edit: after additional digging, I believe I figured out what's going on here. If you look at ClassNameOverride above, it explicitly has a conditional, so that if the component is as={Fragment}, you can't pass className in, because Fragment is a pseudo-component, not a real one (and doesn't have className). If it's a real component, like div, then className can be passed through.

Basically the preact typings are landing on the wrong side of the conditional on this line: https://github.com/tailwindlabs/headlessui/blob/076b03cf491629b1930531c4ca616902be6c1688/packages/%40headlessui-react/src/types.ts#L43

---

I've tried digging into the conditionals, and the odd thing is that my editor introspection seems to find the right types, whereas typescript (and therefore also the editor warnings, which seems based on typescript, and a different system than the introspection) is resolving it incorrectly. I tried manually defining the types, based on that definition of ClassNameOverride, and editor introspection seems to get the types right:

type AProps = PropsOf<"a">;
type AClassName = AProps['className']; // editor introspects this to `string | SignalLike<string | undefined> | undefined`
type AHasClassName = HasProperty<AProps, "className">; // editor introspects this to `true`
// taken from the definition of ClassNameOverride, where we're getting the error:
type AClassNameOverride = true extends HasProperty<AProps, 'className'> ? {
    className?: AProps['className'] | ((bag: {}) => string);
} : {};

So code introspection seems to get the right values, but typescript does not.

[rschristian]

Sorry, when types start to look like that it's all way over my head. I tend to avoid TS that looks like that.

If you think it's a Preact issue, feel free to make an issue; discussions unfortunately have less visibility and this might get missed.

[kurtbuilds]

It's definitely a preact issue. When I make an identical project with React, vs Preact, the error doesn't occur. I'll make an issue for it shortly.

Basically, the types in my example above say, if the props of jsx element a (AProps) include a field className, then the permissible values for that property (AClassNameOverride) are either: the types of that property (namely, a string, or something kinda like one), or a function that returns a string (which is the (bag: {}) => string part. I think what might be going on here is that the property className does exist on the jsx elements, but it's the type of that property is undefined or something. In the above logic, that would make the conditional true, but only give it a type of a function - which is the behavior I'm experiencing.

I think to cut to the chase, I think there are two possible issues here:

1. Is there a property className on the types of the preact built-in components?
2. Could you go over the configuration that needs to happen for react to be fully overwritten by preact? The package manager I'm using is pnpm, and I feel like the types aren't being overwritten correctly. When I use "jump to definition" in my editor, the path for the types is node_modules/.pnpm/@headlessui+react@1.7.15_react-dom@18.2.0_react@18.2.0/node_modules/@headlessui/react/dist/components/disclosure/disclosure.d.ts, which looks to me like react-dom is getting installed as a sub-dependency. I've tried the following configs:

// package.json
{
  "overrides": {
    "react": {
      "@preact/compat": "17.1"
    }
  }
}

Also tried this:

// package.json
{
  "pnpm": {
    "overrides": {
      "react": {
        "@preact/compat": "17.1"
      }
    }
  }
}

And then in tsconfig:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "paths": {
      "react": ["./node_modules/preact/compat/"],
      "react-dom": ["./node_modules/preact/compat/"]
    }
  }

Are there other configurations I should consider playing with?

[rschristian]

Is there a property className on the types of the preact built-in components?

Best I can say is that className is a valid prop, sure?

preact/src/jsx.d.ts

Line 1693 in 2258d7d

className?: string | undefined | SignalLike<string | undefined>;

Could you go over the configuration that needs to happen for react to be fully overwritten by preact?

The paths, as set in your tsconfig.json, should be all that's needed.

I don't use PNPM, but there's probably a flag to get it to knock off being strict with peer deps (installing React for you). NPM uses --legacy-peer-deps for this, I imagine PNPM might have an equivalent.