type check doesn't run for styled-components

[miyacoz]

• Check if updating to the latest Preact version resolves the issue

Describe the bug
before starting, i'm honestly not sure if this's a bug or it's me doing something wrong, especially about typescript settings with preact, so i want you to check the configure in the repro code below first.

hi, i found tsc somehow didn't return a type error that i expected for components using styled-components in my private preact project.
it checks non-styled components properly and returns a result as intended, also the issue doesn't happen in a react project with the same source (though the settings are kinda different as you see in my repro code).

i know preact isn't 100% compatible with react in typing as well, so am kinda reckoning it causes the problem but haven't dug down preact's .d.ts and else.

To Reproduce

here's the repro code: miyacoz/preact-styled-repro
please note there're master branch with preact where the problem is happening, and react branch with react where everything's fine (= tsc properly emitting type errors).

Steps to reproduce the behavior:

1. clone the repro code
2. yarn start then tsc starts
3. confirm tsc doesn't point out <Styled> having an error

also compare the result with react one (don't forget yarn install after checking out).

Expected behavior
tsc properly reports type errors.
in my repro code, it points out type errors with both <Styled> and <Component>.

[rschristian]

You have "skipLibCheck" enabled in your tsconfig.json which hides the fact that a type cannot be formed to check against.

If you remove the "paths" from your tsconfig.json, the correct types will be found to check against. Not sure if there was a reason you added them, but it looks like compat's types might not match up well.

[miyacoz]

i've enabled skipLibCheck intentionally because some of the libraries i'm using emit errors like these (and i just started thinking they also come because of preact's typing?):

node_modules/@types/styled-components/index.d.ts:422:14 - error TS2515: Non-abstract class 'StyleSheetManager' does not implement inherited abstract member 'render' from class 'Component<StyleSheetManagerProps, {}>'.

422 export class StyleSheetManager extends React.Component<StyleSheetManagerProps> {}
                 ~~~~~~~~~~~~~~~~~

node_modules/markdown-to-jsx/dist/index.d.ts:20:22 - error TS2694: Namespace 'React' has no exported member 'Key'.

20         _key?: React.Key;
                        ~~~

they're just samples. i got like a hundred of them, but the majority is similar, like complaining "React has no exported member Foo".

---

paths is required in my project because i'm using parcel as the bundler, and i set it up according to your documentation.
i didn't think paths would have effect to this issue at first, so didn't include it in the repro, i'm sorry. now parcel has been added on add-parcel and react-add-parcel branches if you need to check.

(but another big issue there is the latest parcel (2.4.1) seems to have an issue to find preact/jsx-dev-runtime, so the add-parcel branch cannot serve the page, tsc still works though. react-add-parcel works all fine.)

[rschristian]

i've enabled skipLibCheck intentionally because some of the libraries i'm using emit errors like these

And that'd definitely be the right thing to do, however, skipLibCheck just ignores the errors in node_modules/; it doesn't create a working type from an error.

It seems that preact/compat doesn't include all the fields on React that you/libraries might want to use, so manually setting type paths causes an issue. These fields can be found in preact's typings however, and are automatically picked up upon otherwise.

paths is required in my project because i'm using parcel as the bundler, and i set it up according to your documentation.

Not sure I follow? Our docs don't instruct to use paths in your tsconfig.json w/ parcel.

I'm not familiar with styled-components, and it does spit back a rather large type error, but removing "paths" from your tsconfig.json seems to correct the issue.

[rschristian]

#4271 seems to largely fix this, with a handful of errors still existing in styled-components' types but none in app code, so I'll close this out as fixed.