/* @jsxImportSource foo */ comment works only sometimes.

[trusktr]

I've been trying to get JSX working without using global JSX types, and I have no luck so far.

First, I tried #41813, but import doesn't do the trick (you think it would because ES Module syntax is the standard way to import things).

Because that didn't work, now I'm trying to use /* @jsxImportSource solid-js */ comments to import JSX in specific files where I need solid's JSX (f.e. the project may one JSX lib in some files, and another JSX lib in other files).

I was able to get @jsxImportSource working in this simple example (npm install && npx tsc --noEmit succeeds with no type errors).

But in another project, I'm trying to use the same /* @jsxImportSource solid-js */ syntax, and the JSX namespace is still invisible to the JSX expressions.

The only way I can get it to work, in that project, is by placing "jsxImportSource": "solid-js" inside of tsconfig.json, but that's not what I want, because I want to use different forms of JSX in different files.

I'm using "jsx": "preserve" in tsconfig.json and compile JSX for each of the files after tsc.

TypeScript Version: 4.1.3

Search Terms:

site:github.com typescript "jsxImportSource"

Code

My code in the project where /* @jsxImportSource solid-js */ does not work looks like this:

import type {JSX} from 'solid-js'
type test = JSX.IntrinsicElements // No error, thanks to the `import`

/* @jsxImportSource solid-js */
const div = <div /> // <-- error

Expected behavior:

The JSX expression should work because, not only have I import {JSX} from 'solid-js', but I also /* @jsxImportSource solid-js */

Actual behavior:

I get this error on the <div />:

// JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. ts(7026)

Playground Link:

I would try to provide a playground link, but as described in microsoft/TypeScript-Website#1427, playground appears to not have been updated so that it installs dependencies based on /* @jsxImportSource comments.

Here is my attempt, which is unable to find the solid-js/jsx-runtime import:

playground link

[trusktr]

Reproduction:

https://github.com/trusktr/typescript-issue-41985

git clone git@github.com:trusktr/typescript-issue-41985.git
cd typescript-issue-41985
npm install
npx tsc --noEmit // outputs the error to console

Output:

src/Login.dom.tsx:5:13 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

5 const div = <div /> // still JSX is not found
              ~~~~~~~


Found 1 error.

[trusktr]

Live in-browser reproduction on Gitpod (requires a free Gitpod account):

http://gitpod.io/#https://github.com/trusktr/typescript-issue-41985

Run the same shell commands in the terminal in the in-browser editor.

[trusktr]

In case anyone reads by email, I updated the reproduction: I accidentally pushed it up with a dependency on typescript 4.0.2, and now it uses typescript v4.1.3 as I intended. The same error persists.

[trusktr]

I found the mistake: the /* @jsxImportSource ... */ comment must be at the top of the file. It does not work in any location like the import syntax does.

[typescript-bot]

This issue has been marked as 'Question' and has seen no recent activity. It has been automatically closed for house-keeping purposes. If you're still waiting on a response, questions are usually better suited to stackoverflow.

[trusktr]

I found the mistake: the /* @jsxImportSource ... */ comment must be at the top of the file. It does not work in any location like the import syntax does.

This further supports the idea that JSX should simply be imported via expected and intuitive import statements.

• Import statements can be in any order, while jsxImportSource must be at the top.
• Import statements have to be used if one wishes to use JSX outside of a JSX expression. This leads to a user importing JSX twice when they use JSX inside and outside of JSX expressions: once with import, once with jsxImportSource.

Confusing!