question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug: JSX namespace not being recognized in vite TSX context

See original GitHub issue

Describe 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:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
hyriouscommented, Sep 8, 2021

Let’s clarify that here are two concepts:

  • bundlers reads exports to resolve js file, which is exactly dist/jsx-runtime.js. They have no reason to choose ./jsx-runtime because exports 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 has paths 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:

./dist/jsx-runtime.js
./jsx-runtime.d.ts

Another one (also valid):

./dist/jsx-runtime.js
./jsx-runtime/index.d.ts

Yet another one:

./dist/jsx-runtime.js
./dist/jsx-runtime.d.ts
./jsx-runtime.d.ts
  ^ contents: export * from "./dist/jsx-runtime"
0reactions
aidenybaicommented, Sep 8, 2021

Thanks! Your explanation was really helpful. I chose to go with the:

./dist/jsx-runtime.js
./dist/jsx-runtime.d.ts
./jsx-runtime.d.ts
  ^ contents: export * from "./dist/jsx-runtime"

In the commit I referenced

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found