TSConfig

Declares the module specifier to be used for importing the jsx and jsxs factory functions when using jsx as "react-jsx" or "react-jsxdev" which were introduced in TypeScript 4.1.

With React 17 the library supports a new form of JSX transformation via a separate import.

For example with this code:

tsx
import React from "react";
function App() {
  return <h1>Hello World</h1>;
}

Using this TSConfig:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react-jsx"
  }
}

The emitted JavaScript from TypeScript is:

tsx
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
function App() {
    return (0, jsx_runtime_1.jsx)("h1", { children: "Hello World" });
}
 Try

For example if you wanted to use "jsxImportSource": "preact", you need a tsconfig like:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "types": ["preact"]
  }
}

Which generates code like:

tsx
function App() {
    return (0, jsx_runtime_1.jsx)("h1", { children: "Hello World" });
}
 Try

Alternatively, you can use a per-file pragma to set this option, for example:

tsx
/** @jsxImportSource preact */
export function App() {
  return <h1>Hello World</h1>;
}

Would add preact/jsx-runtime as an import for the _jsx factory.

Note: In order for this to work like you would expect, your tsx file must include an export or import so that it is considered a module.