reactjsvite

useCollapse not callable | Type 'typeof import ("home/.../node_modules/react-collapsed/dist/index")' has no call signatures


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'

Solution

  • When I see the documentation, I can see the package(v4.1.2) named export the useCollapse hook.

    import { useCollapse } from 'react-collapsed'