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.

Beginne mit der verknüpften CodeSandbox-Reproduktion und vergleiche die JSX-Prüfung, wenn h aus getPreact() destrukturiert wird, mit dem direkten Import. Verfolge, wie TypeScript die JSX factory identifiziert und JSX.IntrinsicElements auflöst; fertig ist es, wenn die variablenbasierte factory das JSX ohne TS7026 akzeptiert und das bestehende Verhalten beim direkten Import beibehält.