New TypeScript React app using Vite - JSX.IntrinsicElements errors

rpasechnikov commented 1 year ago

Describe the bug

I'm trying out Vite with React TS and using their official documentation. The app builds and runs, however viewing it in VS Code shows a whole bunch of Property 'div' does not exist on type 'JSX.IntrinsicElements'.ts(2339) errors.

I've created a new React TS application using npx create-react-app my-app --template typescript and am not getting this issue.

Looking at Vite documentation once again, they've got a stackblitz link that exhibits the same issue, so this means that this is not my environment that's the problem.

Am I missing something? Surely this should not be a problem for official Vite documentation? Please note however, that I'm new to React and Vite.

Reproduction

https://stackblitz.com/edit/vitejs-vite-azsc25?file=src%2FApp.tsx&terminal=dev

Steps to reproduce

Open Vite documentation https://vitejs.dev/guide
Navigate to "Trying Vite Online" section
Click on the react-ts link (https://stackblitz.com/edit/vitejs-vite-azsc25?file=src%2FApp.tsx&terminal=dev)
Observe red underlines all over the place stating Property 'div' does not exist on type 'JSX.IntrinsicElements'.(2339)

System Info

Reproduceable both locally as well as on Firefox and Chrome browser, within Vite online react-ts example (see above)

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 1 year ago

Start a new pull request in StackBlitz Codeflow.

vitejs-vite-azsc25 (Open reproduction)

rpasechnikov commented 1 year ago

Ok so it seeks that updating the tsconfig.json from "moduleResolution": "bundler" to "moduleResolution": "node" resolves this. I don't yet fully understand what this does, neither do I understand why Vite does not create a compatible configuration out of the box. I'll response if/when I found out more.

ArnaudBarre commented 1 year ago

Is your VS code up to date? For me the latest version support TS 5 bundler resolution (I'm surprised they use the bundled version instead of the locally installed version...)

cc @patak-dev can you see on updating the version use on stackblitz?

rpasechnikov commented 1 year ago

That ended up being it! Updating VS Code did the trick. Still unsure why the issue is present in the first place and why is it also present in the online sandbox environment, but I'm glad I've got a way forward.

Thanks for your help! :)

bryanltobing commented 1 year ago

i tried in stackblitz and the issue still exist

tiborsaas commented 1 year ago

I've ran into the same issue and indeed updating VSCode solved the validation error.

Upgraded from:

Version: 1.71.0 (system setup)

Version: 1.78.2 (system setup)

Kiku-CN commented 1 year ago

The bundler module resolution is a new feature only work on Typescript 5.x.

Try to update latest typescript with the following command.

npm update typescript -g

or

npm install typescript@latest -g

Ok so it seeks that updating the tsconfig.json from "moduleResolution": "bundler" to "moduleResolution": "node" resolves this. I don't yet fully understand what this does, neither do I understand why Vite does not create a compatible configuration out of the box. I'll response if/when I found out more.

willxy commented 1 year ago

I'm using neovim not vscode, so the vscode update doesn't apply for me.

The typescript in my package.json that gets generated by vite was already v5 (5.0.2). I updated to typescript@latest which gave me 5.04, but that didn't help.

Updating vim plugins (PlugUpdate) and CoC plugins (CocUpdate) didn't seem to resolve it.

Changing my tsconfig.json "moduleResolution" from "bundler" to "node" or "nodenext" makes it work.

ArnaudBarre commented 1 year ago

@willxy probably an issue with your IDE/plugins not supporting/using TS 5. Using moduleResolution node in the meantime is a good solution

GavinSalcedo commented 1 year ago

Ok so it seeks that updating the tsconfig.json from "moduleResolution": "bundler" to "moduleResolution": "node" resolves this. I don't yet fully understand what this does, neither do I understand why Vite does not create a compatible configuration out of the box. I'll response if/when I found out more.

This worked for me. Also I updated my VSCode to version 1.78

Thanks!

patak-dev commented 1 year ago

FYI, the issue in StackBlitz with the react template has been fixed. See https://vite.new/react-ts

vitejs / vite