0

I'm getting this error:

JSX element type 'Button' does not have any construct or call signatures.ts(2604)

This is my styled component:

export const Button = styled.button<IStyledButtonProps>`
  ${(props) => `
    background: ${props.secondary ? 'white' : '#1d9284;'};
    color: ${props.secondary ? '#1d9284;' : 'white'};
  `}
`;

This is the type:

export interface IStyledButtonProps {
  readonly secondary?: boolean;
}

And this is the JSX:

<Button style={{ marginRight: '1em' }} secondary onClick={closeModal}>
    Cancel
</Button>

I have not found any answers and I don't know what to try.

Daniel Tkach
  • 576
  • 2
  • 9
  • 18
  • 2
    Maybe you have some versioning or IDE issues, because it works fine [on this setup](https://codesandbox.io/s/react-typescript-forked-ofpwsh?file=/src/App.tsx). What are your `react` and`styled-components` versions? – Kapobajza Apr 11 '23 at 12:45
  • May be you have some issues with the component render method have a look at here https://stackoverflow.com/questions/31815633/what-does-the-error-jsx-element-type-does-not-have-any-construct-or-call – Hrusikesh Apr 11 '23 at 12:49
  • 1
    I suspect Kapobajza is on the right track. This error message wouldn't be expected where you're simply using `import { Button } from "./Button"` or such. How is `Button` defined in the scope where you're using ``? – motto Apr 11 '23 at 12:55
  • Just a suggestion to use CSS and classes (set in code) not code to style. – Mark Schultheiss Apr 11 '23 at 13:15
  • @motto import { Button, Input, Textarea, ButtonsContainer, Label } from './styles'; and then the styled component that I showed: export const Button = styled.button` ${(props) => ` background: ${props.secondary ? 'white' : '#1d9284;'}; color: ${props.secondary ? '#1d9284;' : 'white'}; `} `; did you mean anything else? – Daniel Tkach Apr 12 '23 at 08:08
  • @MarkSchultheiss what do you mean Mark? – Daniel Tkach Apr 12 '23 at 08:08
  • 1
    No surprises in your import, then! The one extra thing I'd try would be copying the `Button` definition code into your main file and seeing if that also fails. It does feel though like a library versioning problem – as Kapobajza asked, what are your `react` and `styled-components` versions? – motto Apr 12 '23 at 08:15
  • @motto "react": "18.2.0", "styled-components": "5.3.6" – Daniel Tkach Apr 12 '23 at 08:18
  • @motto Copying the definition into the file did it. Why? And why not typing an answer instead of a comment, I'll go ahead and accept it, and if you want to explain why then great. Thank you much. – Daniel Tkach Apr 12 '23 at 08:23
  • 1
    If we can work out why the workaround is needed then we have an answer. Just going off a hunch here but maybe you have some circular dependencies that TS/JS can't resolve – that tends to give strange errors along these lines. Can you check for [circular dependencies](https://stackoverflow.com/a/73668663/21146235) in your original code? – motto Apr 12 '23 at 08:31
  • @DanielTkach for example here: `background: ${props.secondary ? 'white' : '#1d9284;'}; color: ${props.secondary ? '#1d9284;' : 'white'};` this can all be done with CSS via a class or even a data attribute such as this on the element: `data-coolbtn="first"` and in css `.someclass[data-coolbtn="first"]{ background-color: #1d9284;}` and `.someclass[data-coolbtn="second"]{ background-color: #00FF0022;}` – Mark Schultheiss Apr 12 '23 at 16:34

0 Answers0