Error message encountered when trying to associate "can" with an ability instance within Types

Just copying example code from documentation

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

import ability from './abilities';

export const Can = createCanBoundTo(ability);

An error occurs on the last line:

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

Edit: I have exported BoundCanClass in the factory.d.ts file, however, when attempting to use 'can' in my application:

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

I encounter this 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 issue arises because the usage of I should be paired with a, an, or this props. In order to use on, you should opt for 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>

Documentation Reference

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to configure the default entry point for a package.json file in a React

I'm having trouble with the default export in my package.json file. when I try to import: import { Component } from 'packagename/'; // size 22kb or import { Component } from 'packagename/dist' // size 22kb; but import { Component ...

Tips for simulating a Ref

I have a Vue3 component where, within the setup(), I have defined the following function: const writeNote(note: Ref<Note>) => { console.log(`note ${note.id}`) } This function takes a Ref<Note>, with Note being an Interface. There are two s ...

What is the correct way to utilize Array.reduce with Typescript?

My current approach looks something like this: [].reduce<GenericType>( (acc, { value, status, time }) => { if (time) { return { ...acc, bestValue: valu ...

Retrieving selected item values in Angular 2 using ng2-completer

Recently, I decided to experiment with a new autocompleter tool that is unfamiliar to me: https://github.com/oferh/ng2-completer. I successfully imported it and it seems to be functioning properly. My current goal is to retrieve the values of the selecte ...

What is the best way to instantiate objects, arrays, and object-arrays in an Angular service class?

How can I nest an object within another object and then include it in an array of objects inside an Angular service class? I need to enable two-way binding in my form, so I must pass a variable from the service class to the HTML template. trainer.service. ...

Angular Inner Class

As a newcomer to Angular, I have a question about creating nested classes in Angular similar to the .NET class structure. public class BaseResponse<T> { public T Data { get; set; } public int StatusCo ...

Store the selected checkbox values in an array when submitting in Ionic

One issue I am facing is that the checked checkboxes are returning true instead of the value of input (type="checkbox"). Array displaying responded checked or unchecked items I am unable to store this data in an array as needed. Additionally, I cannot sp ...

Encountering a 405 Error While Trying to Detect Location in Angular 7

I encountered an error 405 (Method Not Allowed) when trying to detect the location. Service public fetchWeatherDataByCoordinates(coordinates: ICoordinates): void { console.log("problem here") this.selectedLocationId.next(this.currentCoordinates ...

Creating Algorithms for Generic Interfaces in TypeScript to Make them Compatible with Derived Generic Classes

Consider the (simplified) code: interface GenericInterface<T> { value: T } function genericIdentity<T>(instance : GenericInterface<T>) : GenericInterface<T> { return instance; } class GenericImplementingClass<T> implemen ...

Guide on categorizing MUI icon types

My current code snippet is as follows: type MenuItem = { key: string; order: number; text: string; icon: typeof SvgIcon; }; However, when I attempt to use it in my JSX like this: <List> {MENU.map((menuItem: MenuItem) => ( ...

Nest faces difficulty resolving the dependencies required by the TMPController

I've tried everything to fix this error, but nothing seems to be working. tmp.module.ts import { Module } from "@nestjs/common"; import { TMPController } from "./tmp.controller"; import { TMPService } from "./tmp.service"; @Module({ controllers: ...

Guide to populating a dropdown list using an array in TypeScript

I'm working on a project where I have a dropdown menu in my HTML file and an array of objects in my TypeScript file that I am fetching from an API. What is the best approach for populating the dropdown with the data from the array? ...

There was an issue encountered when creating the class: The parameters provided do not correspond to any valid call target signature

I am facing an issue with my code. Here is the scenario: export class MyClass { public name:string; public addr:string; constructor() {} } I have imported MyClass and trying to use it like this: import { MyClass } from './MyClass' ...

How can I retrieve properties from a superclass in Typescript/Phaser?

Within my parent class, I have inherited from Phaser.GameObjects.Container. This parent class contains a property called InformationPanel which is of a custom class. The container also has multiple children of type Container. I am attempting to access the ...

What is the best way to duplicate a Typescript class object while making changes to specific properties?

I have a Typescript cat class: class Kitty { constructor( public name: string, public age: number, public color: string ) {} } const mittens = new Kitty('Mittens', 5, 'gray') Now I want to create a clone of the inst ...

Utilizing TypeDoc to Directly Reference External Library Documentation

I am working on a TypeScript project and using TypeDoc to create documentation. There is an external library in my project that already has its documentation. I want to automatically link the reader to the documentation of this external library without man ...

What is the best way to have a variable adjust each time a coin is inserted until it reaches a specific value?

I have developed a unique coin box that recognizes the value of each coin inserted. Users can now pay for a service that costs 2.0 € by inserting coins of various denominations such as 2.0 €, 1.0 €, 0.50 €, 0.20 €, and 0.10 €. In my react-nati ...

Issue with index creation using the @index decorator in Typegoose with NestJS and MongoDB

Encountering an issue with typegoose. Trying to create a 2dsphere index on the property geoLocation of model SP. Utilized the typegoose decorator @index but it's not functioning and not throwing any errors. Uncertain about how typegoose handles this s ...

Adding properties with strings as identifiers to classes in TypeScript: A step-by-step guide

I am working with a list of string values that represent the identifiers of fields I need to add to a class. For instance: Consider the following string array: let stringArr = ['player1score', 'player2score', 'player3score' ...

Angular is experiencing difficulty locating the routing path for the auxiliary `router-outlet`

Exploring the intricacies of routing in Angular to gain a deeper understanding of the concept. Encountering an issue where I am receiving an exception NG04002: Cannot match any routes. URL Segment: 'about' when attempting to click on the About li ...