Bug: JSX namespace not being recognized in vite TSX context
See original GitHub issueDescribe the bug
`JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.` error with jsx and vite.
To Reproduce
1. Setup a vite project with this config:
import { defineConfig } from 'vite';
export default defineConfig({
esbuild: {
jsxFactory: 'jsx',
jsxFragment: 'Fragment',
jsxInject: `import { jsx, jsxs, Fragment } from 'million/jsx-runtime'`,
},
});
2. Create a `index.tsx` and `index.html`, and import the tsx file.
3. Write some jsx
4. View intellisense errors
Expected behavior
Should not have this error and vite should use the JSX namespace
Screenshots
N/A
Operating System
MacOS Monterey
Browser
Brave 1.29.77 Chromium: 93.0.4577.63 (Official Build) (arm64)
Additional context
N/A
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Cannot find namespace Context error in React (TypeScript)
To solve the "Cannot find namespace context" error in React typescript, use a .tsx extension for the files in which you use JSX,...
Read more >JSX in TypeScript namespace causes error · Issue #7 - GitHub
Describe the bug Jsx in namespace is not supported, similar to this bug: #22413 Reproduction pnpm create vite demo --template react-ts Steps ...
Read more >Cannot find namespace 'ctx' error when creating Context with ...
I'm working on a project with react using typescript and I'm having a bad ...
Read more >HMR API - Vite
A module that "accepts" hot updates is considered an HMR boundary. Note that Vite's HMR does not actually swap the originally imported module:...
Read more >rollup.js
Namespace Imports. Import everything from the source module as an object which exposes all the source module's named exports as properties and methods....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Let’s clarify that here are two concepts:
bundlers reads
exports
to resolve js file, which is exactlydist/jsx-runtime.js
. They have no reason to choose./jsx-runtime
becauseexports
has the highest priority and once set, there can only be those paths to be exported.typescript reads
types
(for entry point) and tsconfig (if exist) to resolve types. Other paths are mapped to be related to the root of package folder.That is to say, typescript does not know the
exports
field (at least now), since it already haspaths
in tsconfig.(There’s a deprecated field called typeVersion which can redirect type path, but I don’t recommend that.)
In conclusion, here’s a valid pkg stucture if your exports.jsx-runtime is set to ./dist/jsx-runtime.js:
Another one (also valid):
Yet another one:
Thanks! Your explanation was really helpful. I chose to go with the:
In the commit I referenced