JSX element type 'Wrapper' does not have any construct or call signatures.

Environment

• “typescript”: “^4.5.2”
• “@linaria/babel-preset”: “^3.0.0-beta.14”,
• “@linaria/core”: “^3.0.0-beta.13”,
• “@linaria/react”: “^3.0.0-beta.14”,
• “@linaria/shaker”: “^3.0.0-beta.14”,
• “react”: “^17.0.2”,
• “react-dom”: “^17.0.2”,
• node -v v14.18.1

Description

Hi, I have a problem with a typecheck of components. When I create styled component from a html element and use it I get ts error: “TS2604: JSX element type ‘Wrapper’ does not have any construct or call signatures.”

Workaround is to set types manually: styled.div<React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>>>

Reproducible Demo

Doesn’t work

import { styled } from '@linaria/react';

const Wrapper = styled.div`
    padding: 10px;
`;

const CancelPage = () => {
    return <Wrapper>x</Wrapper>;
};

export default CancelPage;

Works:

import { styled } from '@linaria/react';
import * as React from 'react';

const Wrapper = styled.div<React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>>>`
    padding: 10px;
`;

const CancelPage = () => {
    return <Wrapper>x</Wrapper>;
};

export default CancelPage;

[victordidenko]

Adding esModuleInterop option to tsconfig.json has fixed the issue for me, dunno why ¯\_(ツ)_/¯

{
  "compilerOptions": {
+    "esModuleInterop": true,

[fabulator]

With a newer versions I don’t have a problem anymore.