Typescript Error when binding can to ability instance

Question

Simply pasting example code from docs

import { createCanBoundTo } from '@casl/react';

import ability from './abilities';

export const Can = createCanBoundTo(ability);

Gives error on last line:

Exported variable 'Can' has or is using name 'BoundCanClass' from external module "C:/Users/ahmefa04/Documents/SourceCode/temp-cd-next/node_modules/@casl/react/dist/types/factory" but cannot be named.ts(4023)

Edit: I exported BoundCanClass in the factory.d.ts file however when I try to use can in my application:

<Can I="view" on="all">
        <Button size="small" onClick={handleUpdateRow}>
          Update a user
        </Button>
</Can>

I get error:

No overload matches this call. Overload 1 of 2, '(props: BoundCanProps<Ability<AbilityTuple<string, Subject>, { published: boolean; }>>, context?: any): Can<Ability<AbilityTuple<string, Subject>, { ...; }>, true>', gave the following error. Type '{ children: Element[]; I: string; on: string; }' is not assignable to type 'IntrinsicAttributes & (IntrinsicClassAttributes<Can<Ability<AbilityTuple<string, Subject>, { published: boolean; }>, true>> & (Readonly<...> & Readonly<...>))'. Property 'this' is missing in type '{ children: Element[]; I: string; on: string; }' but required in type 'Readonly<{ I: string; this: AnyRecord; field?: string | undefined; } & BoundCanExtraProps<Ability<AbilityTuple<string, Subject>, { published: boolean; }>>>'. Overload 2 of 2, '(props: BoundCanProps<Ability<AbilityTuple<string, Subject>, { published: boolean; }>>, context?: any): Component<BoundCanProps<Ability<AbilityTuple<string, Subject>, { ...; }>>, any, any>', gave the following error. Type '{ children: Element[]; I: string; on: string; }' is not assignable to type 'IntrinsicAttributes & (IntrinsicClassAttributes<Component<BoundCanProps<Ability<AbilityTuple<string, Subject>, { published: boolean; }>>, any, any>> & (Readonly<...> & Readonly<...>))'. Property 'this' is missing in type '{ children: Element[]; I: string; on: string; }' but required in type 'Readonly<{ I: string; this: AnyRecord; field?: string | undefined; } & BoundCanExtraProps<Ability<AbilityTuple<string, Subject>, { published: boolean; }>>>'.ts(2769)

Answer 1

The problem happens because I should be used with a, an or this props, to use on you should use do instead:

<Can I="view" a="all">
   <Button size="small" onClick={handleUpdateRow}>
      Update a user
    </Button>
</Can>

or

<Can do="view" on="all">
   <Button size="small" onClick={handleUpdateRow}>
      Update a user
    </Button>
</Can>

Docs reference