Hello,

I used the vite-solid-tailwind-starter package to start a project and integrate the app with Phoenix Framework.

The starter features a dropdown so I decided to integrate the clickOutside directive from the tutorial.

I added this bit to my div:

use:clickOutside={() => setShowProfileMenu(false)}

First it has this error:

Type '{ children: Element; "use:clickOutside": () => boolean; class: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Property 'use:clickOutside' does not exist on type 'HTMLAttributes<HTMLDivElement>'.ts(2322)

But as the tutorial features a //@ts-nocheck comment I guess it is a known bug.

Now, when I run the app, I have an error:

Uncaught ReferenceError: clickOutside is not defined

If I add a dummy console.log(clickOutside) anywhere in the file then the directive works as expected.

It looks like the tree is shaken a bit too much.

I get the same behaviour with the default code in the starter (without configuring for Phoenix).

I am not sure if I am missing something, as it should work, since it works in the tutorial.

Thank you