I am trying to use the recat-collapse component but is throws this error:
This expression is not callable.
Type 'typeof import("/home/user/Dokumente/iGem/Wiki/bielefeld-cebitec/node_modules/react-collapsed/dist/index")' has no call signatures.
for this code:
import { useState } from 'react';
import useCollapse from 'react-collapsed';
export function Collapsible() {
const [isExpanded, setExpanded] = useState(false)
const { getCollapseProps, getToggleProps } = useCollapse({ isExpanded })
return (
<div>
<button
{...getToggleProps({
onClick: () => setExpanded((prevExpanded) => !prevExpanded),
})}
>
{isExpanded ? 'Collapse' : 'Expand'}
</button>
<section {...getCollapseProps()}>Collapsed content</section>
</div>
);
}
The thing is I am pretty sure the (stable!) package does have a call signature as can be seen below.
declare function useCollapse({ duration, easing, onTransitionStateChange: propOnTransitionStateChange, isExpanded: configIsExpanded, defaultExpanded, hasDisabledAnimation, id, ...initialConfig }?: UseCollapseInput): {
isExpanded: boolean;
setExpanded: (update: boolean | ((value: boolean) => boolean)) => void;
getToggleProps<Args extends {
[k: string]: unknown;
onClick?: react.MouseEventHandler<Element> | undefined;
disabled?: boolean | undefined;
}, RefKey extends string | undefined = "ref">(args?: (Args & {
/**
* Sets the key of the prop that the component uses for ref assignment
* @default 'ref'
*/
refKey?: RefKey | undefined;
}) | undefined): { [K in RefKey extends string ? RefKey : "ref"]: AssignableRef<any>; } & {
onClick: React.MouseEventHandler;
id: string;
'aria-controls': string;
'aria-expanded'?: boolean | undefined;
type?: "button" | undefined;
disabled?: boolean | undefined;
'aria-disabled'?: boolean | undefined;
role?: "button" | undefined;
tabIndex?: number | undefined;
};
getCollapseProps<Args_1 extends {
[k: string]: unknown;
style?: CSSProperties | undefined;
}, RefKey_1 extends string | undefined = "ref">(args?: (Args_1 & {
/**
* Sets the key of the prop that the component uses for ref assignment
* @default 'ref'
*/
refKey?: RefKey_1 | undefined;
}) | undefined): { [K_1 in RefKey_1 extends string ? RefKey_1 : "ref"]: AssignableRef<any>; } & {
id: string;
'aria-hidden': boolean;
role: string;
style: CSSProperties;
};
};
And now I have no idea what went wrong.
When I change it to
const { getCollapseProps, getToggleProps } = useCollapse.useCollapse({ isExpanded })
the error actually goes away, but there is still (like before the change) this error in the console when running the website locally via yarn run dev:
Uncaught SyntaxError: The requested module 'http://localhost:5173/bielefeld-cebitec/node_modules/.vite/deps/react-collapsed.js?v=55d3c6be' doesn't provide an export named: 'default'
When I see the documentation, I can see the package(v4.1.2) named export the useCollapse
hook.
import { useCollapse } from 'react-collapsed'