Generic React HOC: TypeError: Cannot read property 'declarations' of undefined

[mingcenwei]

TypeScript Version: 4.1.2

Search Terms: TypeError Cannot read property declarations of undefined

Code
src-file1.tsx:

import React from "react";

type Tags = "span" | "div";

export const Hoc = <Tag extends Tags>(
	TagElement: Tag,
): React.FunctionComponent => {
	const Component = () => <TagElement />;
	return Component;
};

src-file2.tsx:

import React from "react";

type Tags = "span" | "div";

export const Hoc = (TagElement: Tags): React.FunctionComponent => {
	const Component = () => <TagElement />;
	return Component;
};

Expected behavior:
Both npx tsc --strict --noEmit --jsx 'react' src-file1.tsx and npx tsc --strict --noEmit --jsx 'react' src-file2.tsx will run successfully.

Actual behavior:
npx tsc --strict --noEmit --jsx 'react' src-file2.tsx runs successfully, but npx tsc --strict --noEmit --jsx 'react' src-file1.tsx fails with the error message (where "$PWD" is the present working directory and "$HOME" is my home directory):

"$PWD"/node_modules/typescript/lib/tsc.js:87001
                throw e;
                ^

TypeError: Cannot read property 'declarations' of undefined
    at addImplementationSuccessElaboration ("$PWD"/node_modules/typescript/lib/tsc.js:57022:116)
    at resolveCall ("$PWD"/node_modules/typescript/lib/tsc.js:56947:33)
    at resolveJsxOpeningLikeElement ("$PWD"/node_modules/typescript/lib/tsc.js:57576:20)
    at resolveSignature ("$PWD"/node_modules/typescript/lib/tsc.js:57597:28)
    at getResolvedSignature ("$PWD"/node_modules/typescript/lib/tsc.js:57608:26)
    at checkJsxOpeningLikeElementOrOpeningFragment ("$PWD"/node_modules/typescript/lib/tsc.js:55477:27)
    at checkJsxSelfClosingElementDeferred ("$PWD"/node_modules/typescript/lib/tsc.js:55058:13)
    at checkDeferredNode ("$PWD"/node_modules/typescript/lib/tsc.js:64402:21)
    at Map.forEach (<anonymous>)
    at checkDeferredNodes ("$PWD"/node_modules/typescript/lib/tsc.js:64373:37)
npm ERR! code 1
npm ERR! path "$PWD"
npm ERR! command failed
npm ERR! command sh -c tsc --strict --noEmit --jsx react --esModuleInterop src-file1.tsx

npm ERR! A complete log of this run can be found in:
npm ERR!    "$HOME"/.npm/_logs/2020-11-20T20_34_21_223Z-debug.log

Playground Link:
Compiling the first source file crashes the web compiler,



while compiling the second source file succeeds.

Related Issues:
#33735 #21817 #21811 #21798 #20475 #6428

[mingcenwei]

Using React.createElement(TagElement) instead of <TagElement /> is a workaround.

[capaj]

we also get this error on our production React app at @LeapLabs

[remcohaszing]

We’re also getting this error here. This doesn’t use React, but it does use JSX. The relevant code can be found here.

[lkarmelo]

I get the same issue in simple Button component code when i set "jsx" to "react-jsx" in tsconfig, even if i simplify it to this

const Element = 'button';
return (
   <Element
     //some props
    />
)

Returning just <button /> works fine

[olee]

Could someone perhaps tell me in which version this was introduced so I can downgrade typescript again as minimal as possible?

[remcohaszing]

This bug was introduced in version 4.1.0 and still exists in 4.1.2
The last working version is 4.0.5
A fix was made in #41758 and will be released in 4.2.0
A merge request to include this in 4.1.x is pending in #41862

Until #41862 is released, people should stick to version 4.0.5.