Types: React-Colorful will not work with the TypeScript Preact-CLI template

[rschristian]

If a user were to create a new TypeScript Preact project using the Preact CLI (npx preact-cli create typescript preact-test) and use this library following the instructions, they will run into the following error:

TS2786: 'ColorPicker' cannot be used as a JSX component.
  Its return type 'JSX.Element' is not a valid JSX element.
    Type 'Element' is missing the following properties from type 'Element': nodeName, attributes, children

Not entirely sure where it's coming from. I have a personal project that I was testing with while doing the TS rewrite and it still runs without any issues. Adding react-colorful to the base Preact template seems to be an issue though. Odd.

Likely some issue with the typing differences between React & Preact but it might be possible to resolve by altering our typings slightly.

[omgovich]

Hi @ryanchristian4427!
Maybe skipLibCheck could help?

[rschristian]

SkipLibChecks won't help as the error isn't in the library but in the usage of it, if that makes sense.

Still trying to chase that down but still not entirely sure what causes it.

[omgovich]

Have you seen this discussion?
preactjs/preact#1566 (comment)

Maybe using of FC/FunctionalComponent solves the issue?

[rschristian]

I believe I did come across that thread, though the specific linked comment isn't related, as that is a mistaken mix of FC and return type of an arrow function. Some of the higher up comments are more closely related, but a flipped version of our issue.

I have tried switching to FC but that has no effect, nor should it.

TS2786: 'HexColorPicker' cannot be used as a JSX component.
  Its return type 'ReactElement<any, any> | null' is not a valid JSX element.
    Type 'ReactElement<any, any>' is missing the following properties from type 'Element': nodeName, attributes, children

Same error pretty much. FC boils down to JSX.Element, so this is expected.

I might open an issue over on the Preact boards if I can't chase this down. Really odd, as I do have a perfectly working project or two. Might be some weird dependency that alters the resolution.

I'll certainly continue to play with this, you don't have to spend time tracking this down. Just thought I'd make a note of it in case anyone came across this. Non-TS Preact projects do seems to work fine, for what that's worth. This is just limited to TS.

[rschristian]

I could've sworn this used to work, but perhaps not. Anyways, someone's made a comment over at the preactjs repo preactjs/preact#2748 (comment). Will watch to see if anything comes from it.

[rschristian]

Ah so it seems the issue arises from @types/react. In all my test projects I've not had that in node-modules as nothing I've needed uses it. But with the default TS Preact template, @types/enzyme drags it in.

It seems the TS compiler will prefer to use @types/react over the Preact typings when it can. So if that lib is not in the project, Preact's types are used and everything is peachy.

As react-colorful does not have @types/react as a direct/peer dependency (though we maybe should?) there are some Preact projects in which react-coloful will work and some in which it will not. Waiting on that issue to see what we should do about this though.

[rschristian]

@omgovich

As I don't see any movement on the linked Preact issue, should this maybe be closed with a footnote added to the ReadMe in the "Usage with Preact" section?

[omgovich]

I guess we should.
At least because the issues count move the library down in NPM's search results (that's how NPM's "Quality" metric works).

[rschristian]

Didn't realize that lowers position in the results. That's quite crap.

But yeah, I don't see a reason to keep an issue open if there's no movement. Better to just document a workaround and close.

It's just about midnight here but tomorrow I'll whip up a quick workaround people can use and some documentation for it.

[omgovich]

Don't worry and no rush. Our quality metric is 5 stars anyway)

P.S. In case you want to know how NPM measures it: https://www.npmjs.com/package/package-quality