Imported directive not defined (with TypeScript)

[Ehesp]

Describe the bug

Working with directives and TypeScript doesn't seem to be playing well together.

When importing a directive from a file, I get the error:

ReferenceError: <name> is not defined

I came across this issue: #569

Adding my Vite plugin as:

solidPlugin({ typescript: { onlyRemoveTypeImports: true } }),

then causes another issue: The requested module '/node_modules/.vite/deps/solid-js.js?v=dacde466' does not provide an export named 'Component'

Your Example Website or App

https://stackblitz.com/edit/solid-vite-sv6hn7?file=src/index.tsx

Steps to Reproduce the Bug or Issue

1. Make a file for your directive.
2. Import it and attach it.
3. Open the console to see the error.

Expected behavior

The directive is recognised.

Screenshots or Videos

No response

Platform

• OS: macOs
• Browser: Chrome
• Version: 101.0.4951.64

Additional context

TypeScript also complains about:

'useFoo' is declared but its value is never read. ts(6133)

[atk]

Duplicate of #569

[otonashixav]

FWIW the linked example does work with a newer version of vite-plugin-solid and with onlyRemoveTypeImports: true specified: https://stackblitz.com/edit/solid-vite-fknxfr?file=vite.config.ts

Another workaround you can attempt if onlyRemoveTypeImports is causing issues is to reference the import somewhere so that typescript doesn't get rid of it:

import { useFoo } from './directive';
0 && useFoo; // "use" useFoo so that typescript doesn't remove it

function Counter() {
  return <button use:useFoo>Hello!</button>;
}

Most likely the other error you're encountering is caused by doing import { Component } from "solid-js"; with onlyRemoveTypeImports I believe it needs to be import { type Component } from "solid-js".

[edemaine]

See also this section of the TypeScript guide.

[elite174]

Would it be better to improve directives syntax instead?
Some time ago solid supported className field. It means that it's possible to make a solid field called use={[directivesArrayHere]}. IMO this would be more straightforward and obvious. Moreover it will eliminate issue with typescript (actually, these typescript guides for using directives sound like a hack)

[Ehesp]

I agree with that. I'm really liking working with directives but it does feel a bit hacky having to declare the variables randomly.

[ryansolid]

Yeah it's super unfortunate. But if you put aside TS for a moment, and look at the current syntax it makes a lot of sense and is "better". I went into detail about this in some older issue when we first introduced directives. These same suggestions came up at the time although it wasn't for this tree shaking problem. I'd be all for some solution to do this with compilation. Like some ability to change the file before TS gets it, but I don't want to change the existing syntax if possible.

One of the larger downsides of the syntax change is losing the automatic JSX expression wrapping. It also opens up the need for both compiled and runtime mechanisms, since if you treat it like an array now there is possibility to just pass a variable.

[elite174]

Unfortunately, it's quite difficult to "ignore" TS because the majority of projects uses typescript.

[atk]

Unfortunately, it's quite difficult to "ignore" TS because the majority of projects uses typescript.

It was not meant that we would like to actually ignore TS, but rather, "if it were not for this TS issue". We still use a lot of time and resources to improve the type definitions and documentation. Unfortunately, TS either forces us to ignore this TS issue or change our API to a less sensible one, something that we want to avoid.

[ryansolid]

Closing as stale.

[samuelstroschein]

Discussion is ongoing in #805