The demon is Component cannot be used as a JSX component. Its return type 'Element[]' is not a valid JSX element

I attempted to transition the frontend from JavaScript to TypeScript and encountered several issues with High-Order Components (HOCs).

The initial problem arose when it consistently raised complaints about the WrappedComponent. Upon simplifying the code snippet to ReactJS + TypeScript + HOC, the error persisted. I moved it to a new file, and it worked fine. It was then that I realized the file was missing the .tsx extension.

The second issue involved . Initially, I suspected a props type mismatch, but even after removing all props, the problem persisted. Below is the code I used.

import React, { ComponentType } from 'react';


export const QuestionWrapper = (OriginalComponent: ComponentType) => {
  const NewComponent: React.FC = () => {
    return <OriginalComponent />;
  };
  return NewComponent;
};

Then I came to realize that there might be an issue with TypeScript compatibility. After incorporating certain configurations into tsconfig.json, the problem was resolved.

"compilerOptions": {
    "paths": {
      "react": ["./node_modules/@types/react"]
    },

Encountering peculiar issues is quite common, but the solution often lies in simplicity. By distilling it to its simplest form, you can uncover the essence of the problem, refining it gradually, much like assembling building blocks.