BUG | 2.0.2 | 'EqualHeightElement' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element.

[tandrasi]

Hi, I just upgraded to version 2.0.2 from 1.0.3 and everything else being equal, I get the following error:

'EqualHeightElement' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'string' is not assignable to type 'ReactElement<any, any>'

I have followed the upgrade steps and made the relevant updates:

1. The tag prop has been replaced by as in EqualHeightElement
2. The updateOnChange prop now only accepts an array based on DependencyList
3. The class name equal-height-JlocK has been updated to equal-height-wrapper

[loba-b]

What TS version you are using? I didn't add intentionally explicity return of type for components based on article: https://www.totaltypescript.com/jsx-element-vs-react-reactnode.

You should almost never use JSX.Element or React.ReactElement in your code. They're types used internally by TypeScript to represent the return type of JSX expressions. Instead, use React.ReactNode to type the children of your components. I'd also suggest not annotating the return types of your components to avoid confusion - but if you're using TypeScript 5.1, go ahead.

I am wondering where the error lies. Is it on my side and I should explicitly add the type ‘ReactNode’ for all components, or is the problem somewhere else like a big incompatibility of TS versions, or the type of parent components or something else?!

[tandrasi]

I'm using TS 4.7.4.

Previously, you used TS 5.5.2+ and now you're on 5.6.3+.

I'm even on React 17, but you have been using React 18 on v1 and v2.

I honestly feel something is not right with the exports. I have used loads of packages, and this is the only one that exhibits this problem.

Take a look at "fixedForwardRef". If you change its signature to the following, you will see the same error as me on your end in various places, like "app.tsx"

function fixedForwardRef<T, P = {}>(props: P & RefAttributes<T>): ReactNode {
    // @ts-ignore
    return forwardRef(render) as any;
}

[tandrasi]

@loba-b I've had another read of that link you sent and indeed I think it's a TypeScript version issue.

In TypeScript versions before 5.1, you can't use React.ReactNode in one specific case - typing the return type of a component.

For compatibility between TypeScript versions, may I suggest changing the return types from React.ReactNode to React.ReactElement?

[loba-b]

Hi @tandrasi thank you for your support. I'll check it out, but I'm also thinking of removing the types for the returned component in fixedForwardRef. In the other component I didn't add such types because of the article, but for fixedForwardRef I found the solution online and didn't notice that there is type.

[loba-b]

@tandrasi I think I have fixed the problem. I've removed the fixedForwardRef and am passing the ref in the props in the standard way, so I'm still not adding the component type explicitly, so it should work correctly for TS4 and TS5. I'll run more tests today and if everything is fine, I'll implement the new version.

[tandrasi]

Thanks! In case you're committing a new version, I won't be able to check it out until Monday. Appreciate your work!

[loba-b]

I have just released a new version @2.0.3. Please test it when you can and please let me know if it is ok.