[BUG] This JSX tag requires the module path 'react/jsx-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.

[jcalfee]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.100.23258
• OS Version: Linux x64 6.9.3-76060903-generic
• Chromium: 132.0.6834.210
• Node.js: 20.19.0
• V8: 13.2.152.41-electron.0

Steps to Reproduce:

1. Open a .tsx file in a solidjs project (probably any non-react project) and observe all JSX syntax triggers a typescript error masking other potential ts errors.

• 1.100 always happens and the error changed to This JSX tag requires the module path 'react/jsx-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed. See merge

Prior versions showed up like this:

• 1.95.3
• 1.98.2.25078 it occasionally happened but the error was "This JSX tag requires 'React' to be in scope, but it could not be found."

A work-around is appreacted!

[eps1lon]

Open a .tsx file in a solidjs project (probably any non-react project) and observe all JSX syntax triggers a typescript error masking other potential ts errors.

A SolidJS project without a properly configured tsconfig.json, right? tsc would report the same error.

[jcalfee]

Great question, I was wondering how I would narrow this down. I have something like a mono-repo where I point vscode to the root and vscode is smart enough to scan and pickup all the sub-projects directly in that folder (big help). In the case above, that folder does have a tsconfig.json as follows. Other projects use pnpm link to reference that project so they have "ipweb": "link:../ipweb" in their package.json.

{
 "compilerOptions": {
 "allowJs": true,
 "checkJs": true,
 "allowSyntheticDefaultImports": true,
 "esModuleInterop": true,
 "target": "ESNext",
 "module": "ESNext",
 "moduleResolution": "node",
 "jsxImportSource": "solid-js",
 "jsx": "preserve",
 "strictNullChecks": true,
 "exactOptionalPropertyTypes": true,
 "allowImportingTsExtensions": true,
 "noEmit": true,
 "baseUrl": "./",
 "paths": {
 "ipweb/*": ["*"]
 }
 },
 "exclude": [".archive", "**/.archive/*"],
 "include": ["src", "server", "./vite-env.d.ts"]
}

After my testing above (upgrading and downgrading), I eventually opened more files from a referencing project and the issue did not appear. So, I was able to upgrade back up to vscode 1.100 and so far so good. I'm not sure how to recreate it. It just has a mind of its own and shows up from time to time. It has been rare until the other day when TS Restarts and VCode restarts did not fix it (so I though I should document it here). I'm not sure what fixed or caused it.

[RyanCavanaugh]

We need an actionable repro in order to investigate this

A useful command if you have a lot of config files is the "Go to Project Configuration" verb in the VS Code command palette, which will take you to the controlling config file for the current file.

[jcalfee]

I point to one folder with projects where just over 10 have a tsconfig.json file. It is definitely hit or miss and the bug would even appear and disappear. The editor had a really bad day (when I created this issue) that was pretty disruptive. Finally it cleared up on its own, restarts and upgrading did not help. Maybe there is a cache somewhere that I can clear? If it happens again I guess I'll clean up my folders and move in the repositories I"m using one by one.

[martinring]

I have the same issue. Also with solidjs. Two adjacent tsx files with the same content. One shows the issue the other doesn't. The issue persists restarts. tsconfig looks pretty much the same as above.

[martinring]

For the working file "Go to Project Configuration" takes me to the tsconfig, for the one with the issue it doesn't. However tsconfig has "include": [ "src/**/*.ts", "src/**/*.tsx" ] and both files are in the same folder.

[martinring]

Ok. I can reproduce the error now, with this simple setup:

when i have these two files in the root directory:

• tsconfig.json:

{
 "compilerOptions": {
 "jsx": "preserve",
 "jsxImportSource": "solid-js",
 "module": "commonjs"
 },
 "exclude": [
 "node_modules"
 ]
}

• Example.tsx:

const a = <div></div>

I get the error This JSX tag requires the module path 'solid-js/jsx-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed. indicating that the tsconfig is respected.

However, when I add an adjacent empty file with the same name but ts ending (in this case example.ts) and restart the TS Server, I get This JSX tag requires the module path 'react/jsx-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed. indicating that the tsconfig is ignored.

[jcalfee]

Did you mean to say Example.tsx and Example.ts? I don't know if your files are case sensitive or not.

[martinring]

No actually it was Example.tsx and example.ts on MacOS. As soon as I remove the file with the same (but differently cased and .ts ending) name the tsx file is recognised as part of the tsconfig project.

[fredkzk]

Maybe this issue was figured out by now. But just in case, find your config in https://zed.dev/docs/languages and add to your settings to address the JSX warning.
My config in the settings file for example:

{
 "lsp": {
 "deno": {. # <= I USE DENO
 "settings": {
 "deno": {
 "enable": true
 }
 }
 }
 },
 "languages": {
 "JavaScript": {
 "language_servers": [
 "deno",
 "!typescript-language-server",
 "!vtsls",
 "!eslint"
 ],
 "formatter": "language_server"
 },
 "TypeScript": {
 "language_servers": [
 "deno",
 "!typescript-language-server",
 "!vtsls",
 "!eslint"
 ],
 "formatter": "language_server"
 },
 "TSX": {
 "language_servers": [
 "deno",
 "!typescript-language-server",
 "!vtsls",
 "!eslint"
 ],
 "formatter": "language_server"
 }
 }
}

Your compilerOptions remains correct.