Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

select elements receive React typings #111

Closed
TheDutchCoder opened this issue Mar 23, 2021 · 8 comments
Closed

select elements receive React typings #111

TheDutchCoder opened this issue Mar 23, 2021 · 8 comments
Labels
question Further information is requested

Comments

@TheDutchCoder
Copy link

We're running into a very strange issue where the use of a select element will, for some reason, try to infer types from React:
image

I haven;'t been able to reproduce this elsewhere. Only seems to occur when using select

@TheDutchCoder
Copy link
Author

Oh this also happens for regular inputs:
image

@johnsoncodehk
Copy link
Member

It seem your project included react types, please disable volar.tsPlugin and check this code types on *.ts.

declare let select: JSX.IntrinsicElements['select']; // should be ElementAttrs<SelectHTMLAttributes>
declare let input: JSX.IntrinsicElements['input']; // should be ElementAttrs<InputHTMLAttributes>

@johnsoncodehk johnsoncodehk added the question Further information is requested label Mar 24, 2021
@TheDutchCoder
Copy link
Author

Yeah it's very strange, we don't use React at all, nor are React types installed.
When I follow your instructions I get:
let select: React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>

Searching for "react" in the package lock file only turns up a bunch of babel plugins. I'm not sure what dependency leans on that, because I don't use babel myself.

@TheDutchCoder
Copy link
Author

Our project does use Storybook and their stuff is all React of course. I wonder if that's interfering (though I wouldn't know how).

@johnsoncodehk
Copy link
Member

Try use include / exclude options in tsconfig.json to ignore JSX.IntrinsicElements from react library.

You could click Go to Definition on IntrinsicElements to find the library.

@TheDutchCoder
Copy link
Author

tsconfig.json is already set to ignore node_modules and there's two definitions I get:

  1. node_modules/@types/react
  2. node_modules/@vue/runtime-dom/dist

Should I explicitly exclude the react types path? Shouldn't that already be done by ignoring node_modules all together?

@johnsoncodehk
Copy link
Member

johnsoncodehk commented Mar 24, 2021

Sorry i'm not really familiar to tsconfig.json, maybe use the types option?

Let me know if you find out the correct setup. And you should test it on *.ts to exclude volar side problem.

@TheDutchCoder
Copy link
Author

Oh man, I think I've found the issue!
The tsconfig.json didn't have types specified, so I guess it just uses everything it can find or something.

If I set it to ["node", "jest"] it works.

nothing to do with Volar, sorry for the distraction!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants