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.

Start with the linked CodeSandbox reproduction and compare JSX checking when h is destructured from getPreact() versus imported directly. Trace how TypeScript identifies the JSX factory and resolves JSX.IntrinsicElements; done means the variable-based factory accepts the JSX without TS7026 while preserving the existing direct-import behavior.