Let jsxImportSource be configurable through tsconfig.json

[Andarist]

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

[seanbruce]

I created a new project using CRA4 with typescript template today.
I have a difficult time trying to use emotion. as I know with the release version 10.1.0 of emotion, I should use /** @jsxImportSource @emotion/core /` instead of /* @jsx jsx */, so I try to use like this

/** @jsxImportSource @emotion/core */
import { jsx } from '@emotion/core';

or just

/** @jsxImportSource @emotion/core */

but I got error anyway saying "'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.". I guess maybe it's about CRA typescript template.

I'm not familiar with neither CRA nor new JSX runtime.

[Andarist]

Could u share a repository with this issue reproduced? I could take a look at this.

[seanbruce]

@Andarist Thanks! here is the repository https://github.com/seanbruce/butler-of-ellen.git

[Andarist]

The current TS version is not aware of the new @jsxImportSource and thus it doesn't know that there are already implicit imports (inserted automatically) based on that @jsxImportSource pragma. This requires TS 4.1 which is currently at the beta stage and I believe that it is supposed to be shipped as stable this month.

I've managed to trick the compiler to accept this by changing this:
https://github.com/seanbruce/butler-of-ellen/blob/28754637234e145547f16232fe5eef111457a651/tsconfig.json#L18
to "preserve"

And by adding import '@emotion/core' to this file:
https://github.com/seanbruce/butler-of-ellen/blob/28754637234e145547f16232fe5eef111457a651/src/react-app-env.d.ts

[seanbruce]

following this trick. I change compilerOptions.jsx to "preserve" and add change react-app-env.d.ts like this

import '@emotion/core';
/// <reference types="react-scripts" />

then I run yarn start I got this error says TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

[Andarist]

Oh, right 😢 I've focused on fixing TS problems without running yarn start and CRA enforces certain values to be what they want them to be. Those are enforced values:

create-react-app/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js

Lines 148 to 158 in aec42e2

	jsx: {
	parsedValue:
	hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta')
	? ts.JsxEmit.ReactJSX
	: ts.JsxEmit.React,
	value:
	hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta')
	? 'react-jsx'
	: 'react',
	reason: 'to support the new JSX transform in React 17',
	},

I'll give this more thought but I don't have an idea how this can be approached right now without waiting for TS 4.1

[seanbruce]

@Andarist I think I just wait for TS4.1 released to solve this issue once and for all. for now, I use this not perfect solution until TS4.1. Thank you so much for your time.😄

[FinPlorer]

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 ?

[Andarist]

And this issue is exactly about this problem. I'm proposing that the CRA's Babel preset could be "configured" with the importSource based on the jsxImportSource of the tsconfig.json. I believe that wouldn't compromise the 0config approach taken by the CRA.

[stephenh]

@iansu fyi this feature (being able to pass importSource to babel) would be a big usability win for CRA's CSS-in-JS users (i.e. emotion/et al) by being able to remove the /** jsxImportSource ... */ lines that currently have to be copy/pasted into every file in a project.

It looks like this PR added an importSource with a process.env.JSX_IMPORT_SOURCE flag:

https://github.com/facebook/create-react-app/pull/10138/files#diff-7cd8a2246cedc973ca54463e12073aaff89e13fda0f3d8b61742ec8e2b64b708R100

But @Andarist is suggesting adding a smarter if-isTypeScriptEnabled-then-parse-tsconfig-for-its-jsxImportSource setting, right around this section of code from your "New JSX Transform Opt Out" PR:

https://github.com/facebook/create-react-app/blame/master/packages/babel-preset-react-app/create.js#L99

If I wrote a PR that changed that ~section of code to conditionally parse tsconfig.json and pass along importSource to babel, would that likely get accepted? Do you have any preferences/suggestions for a better approach?

Thanks!

(...I'm a little worried about "just fs.load tsconfig.json; while really simple, it wouldn't support tsconfigs that extend other tsconfigs ... would have to research the idiomatic way of loading tsconfigs...although maybe that could be a V2.)

[Andarist]

TS exposes the API to read the config file so that part shouldn't be particularly a problem:

create-react-app/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js

Lines 173 to 176 in aec42e2

	const { config: readTsConfig, error } = ts.readConfigFile(
	paths.appTsConfig,
	ts.sys.readFile
	);

[onpaws]

@stephenh Curious if you had the chance to start the PR you mentioned?
I just created a new CRA4 app + Emotion 11 and ran into this - completely agree it will be awesome for CRA users if they don't have to manually prepend
/** @jsxImportSource @emotion/react */
on a per-file basis.