Typescript FunctionComponent
See original GitHub issueHi, maybe I’m missing something but here is the situation. I have a functional component with this signature:
const Input : FunctionComponent<Props> = (props: Props)
Then using Storybook for Preact I have the following story
storiesOf('Input', module)
.add('Sample', () => <Input type="text" />)
And in this situation I get a typescript validation error with the following message at the story level.
JSX element type 'VNode<{}>' is not a constructor function for JSX elements.
Type 'VNode<{}>' is missing the following properties from type 'Element': nodeName, attributes, children
So I add method is expecting a RenderFunction which is an alias to one or more Preact.AnyComponent or JSX.Element.
Then I checked the FunctionComponent and it return a function that returns VNode or null.
So I checked and JSX.Element extends VNode<any> so this should be correct. But doesn’t work.
If on index.d.ts I changed the interface
interface FunctionComponent<P = {}> {
(props: RenderableProps<P>, context?: any): VNode | null;
displayName?: string;
defaultProps?: Partial<P>;
}
To
interface FunctionComponent<P = {}> {
(props: RenderableProps<P>, context?: any): preact.JSX.Element | null;
displayName?: string;
defaultProps?: Partial<P>;
}
Then the error gets solved but I’m not sure this is correct or if I’m doing something wrong. Btw I’m using the latest release of preact
Issue Analytics
- State:
- Created 4 years ago
- Reactions:3
- Comments:16 (8 by maintainers)
For others arriving here for a similar issue.
This fails:
Error in the return:
and error when using this component:
This is correct:
the component should be a FunctionalComponent. It doesn’t return one
Have you configured
jsxFactory
?