TS7026 when using JSX factory from a variable rather than import

Bug Report

🔎 Search Terms

TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

🕗 Version & Regression Information

• This is the behaviour in every version I tried, and I reviewed the FAQ for entries about JSX and React

⏯ Playground Link

https://codesandbox.io/s/dank-wood-cqpld?file=/src/index.tsx

💻 Code

// helping typescript to figure out the types by defining
// the return type as ...
function getPreact(): typeof import("preact") {
	// imagine that this function doesn't call require()
	// but rather uses some dynamic import, which returns
	// the same export that this call would do:
	return require("preact");
}

const { h, render } = getPreact();

function App() {
	return <div>Hello, world!</div>;
}

render(<App />, document.getElementById("app")!);

🙁 Actual behaviour

TypeScript ignores the h in the scope and errors out any vanilla JSX code because ‘no JSX.IntrinsicElements exist’. Yet it works flawlessly if you compile it ignoring types using, say, Babel. It seems that it also works correctly if you use raw h call instead of JSX.

🙂 Expected behaviour

TypeScript would be smart to figure out that h in scope is a factory method that it needs, as set by configuration (even though it's ‘imported’ weirdly) and use provided by it JSX to find IntrinsicElements and be happy with it.

Inizia con la riproduzione collegata su CodeSandbox e confronta il controllo JSX quando h viene destrutturato da getPreact() con l’importazione diretta. Traccia il modo in cui TypeScript identifica la JSX factory e risolve JSX.IntrinsicElements; il lavoro è completato quando la factory basata su variabile accetta il JSX senza TS7026, preservando il comportamento esistente dell’importazione diretta.