Let jsxImportSource be configurable through tsconfig.json

Is your proposal related to a problem?

Right now it’s only suggested for tsconfig.json to set "jsx": "react" but it’s not enforced.

TS 4.1 will bring new JSX-related option (jsxImportSource) and new possible values for the jsx option (react-jsx & react-jsxdev) - both of those changes are related to the new JSX runtimes.

TS also has an ability to change what exact JSX namespace is used for type-checking based on the used jsx factory as per the documentation. This probably means that there is a problem for some possible configuration today: TS can do its typechecking thinking that another factory is used (when one would configure jsxFactory) but in fact the emitted code uses the default factory of React.createElement because the transpilation is done by Babel that is not aware of TS configuration.

I’m not really interested in fixing this problem - I haven’t found any issue about this so the audience for this is probably very little and it’s just a possible problem that I have thought of and not something that affects me.

However, I would really love to be able to configure jsxImportSource globally and while you don’t allow for Babel customization (which is understandable tradeoff here) you allow for some tsconfig.json configuration. It (tsconfig.json) seems to be a good match for inferring this particular configuration for a vast number of consumers (as TS is used by a lot of people).

Motivation

I’m a maintainer of Emotion which is a popular CSS-in-JS solution for React (3.4M downloads/week) which comes with the CSS prop API that is based on @jsx pragma (although not all of our consumers use the CSS prop API as we expose the popular styled API as well).

Right now the @jsx pragma in CRA has to be used all over the place. We personally don’t find it to be that problematic but we get complaints about this regularly from the community. Having a way to configure this (new transforms, not the old pragma) globally in CRA would probably result in a huge DX improvement for us.

Describe the solution you’d like

Provide custom importSource to @babel/preset-react, based on the jsxImportSource from tsconfig.json

Describe alternatives you’ve considered

If this is something that you don’t want to support then I strongly believe that you should disallow configuring jsxImportSource in the tsconfig.json altogether because it causes a configuration mismatch between TS and Babel and this might be a footgun for people.

---

• Implementation intent

[donaldkg]

This issue is confusing and some documents say this typescript config works but actually it is not. Do you have any updates on this issue?

[MatthieuCoelho]

With version Typescript 4.1 I tried

"jsxImportSource": "@emotion/react",
"jsx": "react-jsx"

But the css props from emotion is not working, I have to put “/** @jsxImportSource @emotion/react */” on top on the file.

Is the property jsxImportSource ignored ?