Property 'div' does not exist on type 'JSX.IntrinsicElements'.

[ZacharyBear]

Describe the bug

This problem will appear when I use vite build a react-ts project.

When I write some HTML element in JSX, IDE will always prompt Property '...' does not exist on type 'JSX.IntrinsicElements'.. I‘d not change anything, it‘s just a default project create by vite.

Actually, the react-ts template preset provided on the vite official website also within this problem.

Reproduction

https://stackblitz.com/edit/vitejs-vite-88gtsm?file=index.html&terminal=dev

Steps to reproduce

No response

System Info

System: Windows 11
Binaries: Default packages provided by vite(react-ts template)
Browser: Chrome 115.0.5790.110
IDE: VSCode

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-88gtsm (Open reproduction)

[welpie21]

Hello, Not sure if you are using the code within StackBlitz or vscode or other IDE.

When you do pnpm create vite@latest and select one of the options that provides a typescript solution. After you've done you have to install the dependencies after the react vite project has been created.

A new folder appears called node_modules and I do not see it appear in StackBlitz ( even when I run npm install ) which is needed to reference the types to make sure typescript works correctly with the IDE.

When I create the project locally on my computer and run npm install or pnpm install I do not get the errors what you get. So check if stackblitz doesn't have any issues.

[ZacharyBear]

I used npm and I have done `npm i`. The StackBlitz should install dependencies automatic. ZENKIE

…

---Original--- From: ***@***.***> Date: Thu, Aug 3, 2023 19:06 PM To: ***@***.***>; Cc: "Zenkie ***@***.******@***.***>; Subject: Re: [vitejs/vite] Property 'div' does not exist on type 'JSX.IntrinsicElements'. (Issue #14011) Hello, Not sure if you are using the code within StackBlitz or vscode or other IDE. When you do pnpm create ***@***.*** and select one of the options that provides a typescript solution. After you've done you have to install the dependencies after the react vite project has been created. A new folder appears called node_modules and I do not see it appear in StackBlitz ( even when I run npm install ) which is needed to reference the types to make sure typescript works correctly with the IDE. When I create the project locally on my computer and run npm install or pnpm install I do not get the errors what you get. So check if stackblitz doesn't have any issues. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[glompix]

This happens to me out of the box with the unmodified template using yarn 3. This is not StackBlitz, just the Mac Mini sitting on my desk. Editor is a non-factor. Feels like a PnP issue.

❯ node --version
v16.15.1

❯ yarn create vite --template react-ts
❯ cd vite-project
❯ yarn
❯ yarn build

[... a bunch of "Cannot find module 'react'"-type errors]

Found 28 errors in 2 files.

Errors  Files
    25  src/App.tsx:1
     3  src/main.tsx:1

[ZacharyBear]

Actually Vite haven‘t give me an error, it‘s just an Editor warning. But when I use NextJS, they got no problem about this.😥

[Leandrocoelho1]

Actually Vite haven‘t give me an error, it‘s just an Editor warning. But when I use NextJS, they got no problem about this.😥

@ZenkieBear I was having the same errors on VSCode and updating it solved for me.

[ZacharyBear]

Update what? ZENKIE

…

---Original--- From: "Leandro ***@***.***> Date: Sat, Aug 12, 2023 19:02 PM To: ***@***.***>; Cc: "Zenkie ***@***.******@***.***>; Subject: Re: [vitejs/vite] Property 'div' does not exist on type 'JSX.IntrinsicElements'. (Issue #14011) Actually Vite haven‘t give me an error, it‘s just an Editor warning. But when I use NextJS, they got no problem about this.😥 I was having the same errors on VSCode and updating it solved for me. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[ajraduenz]

Similar issue here when I started a new vite project using npm create vite@latest, Node v18.17.1, Typescript 5.1.6

[namanyash]

Stuck on a similar issue.

yarn dev command works and I can see my app on local server but yarn build fails.

[wangxiaolei5]

Similar issue here when I started a new vite project using pnpm create vite@latest, Node v16.14.0, Pnpm 7.4.0,Typescript 5.1.6

[sachila]

change the "moduleResolution": "Node" in tsconfig.json

[Universe-stack]

Just encountered same problem on my machine..

[sisco0]

change the "moduleResolution": "Node" in tsconfig.json

This was the correct answer for me. I used Neovim + CoC.nvim with coc-tsserver. Worked fine after the modification.

[sapphi-red]

Closing as this seems to be fixed in stackblitz repro.

[ZacharyBear]

Similar issue here when I started a new vite project using pnpm create vite@latest, Node v16.14.0, Pnpm 7.4.0,Typescript 5.1.6

哥们，你这有水印，小心点

[AljazOblonsek]

For anyone else that might have this problem. Setting workspace typescript version in VS Code solved it for me:

In the VS Code command palette, run the TypeScript: Select TypeScript version command.
Make sure you have Use Workspace version selected.

Source: microsoft/TypeScript#52396 (comment)

[huajianduzhuo]

For anyone else that might have this problem. Setting workspace typescript version in VS Code solved it for me:

In the VS Code command palette, run the TypeScript: Select TypeScript version command. Make sure you have Use Workspace version selected.

Source: microsoft/TypeScript#52396 (comment)

Brilliant!