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

Is it possible for lodash's omit function to return a specific type instead of just a partial type?

Within the following code snippet: import omit from "lodash/fp/omit"; type EnhancerProps = { serializedSvg: string; svgSourceId: string; containerId: string; }; const rest = omit(["serializedSvg", "containerId"])(props); The variable 'rest&a ...

Converting a file into a string using Angular and TypeScript (byte by byte)

I am looking to upload a file and send it as type $byte to the endpoint using the POST method My approach involves converting the file to base64, and then from there to byte. I couldn't find a direct way to convert it to byte, so my reasoning may be ...

After installing an npm package from GitHub, I encountered an issue where the package could not be resolved, causing issues with my Angular

After encountering a few issues with a package, I had to fork it and make some fixes. Although the npm install process seems to go smoothly and the package appears in node_modules I am facing build errors (unable to resolve package) and seeing red squiggl ...

Tips for packaging a Node TypeScript/JavaScript library using Webpack

I am currently working on a Node project with the following setup: Written in Typescript Using Webpack and ts-loader for bundling Targeting Node.js +-proj/ +-src/ |-file1.ts |-file2.ts |-file3.ts |-... |-package.json |-webpack.confi ...

Mastering the Type Model on Firestore Function to Retrieve Field ValuesUnlock the potential of the Type

When retrieving data from Firestore, I am able to print the entire object using doc.data. However, I am having trouble accessing the specific value of unixtime as it is coming through as undefined. I need help in correctly applying my type model so that I ...

Data loss occurs when the function malfunctions

Currently, I am working with Angular version 11. In my project, I am utilizing a function from a service to fetch data from an API and display it in a table that I created using the ng generate @angular/material:table command. Client Model export interfac ...

VSCode is unable to locate the typeRoots type declarations

I have organized all the type definitions that will be used in my application into a single file. I created a folder named @types and an index.d.ts file that exports every interface/type needed. I updated my tsconfig.json to include the @types folder: { ...

Exploring the functionality of the Angular snackbar feature

I have created a simple snackbar with the following code: app.component.ts: ngOnInit(){ this.dataService.valueChanges.pipe( filter((data) => data === true), switchMap(() => { const snackBarRef = this.matSnackBar.open ...

Can you input a string into a generic in TypeScript and subsequently utilize it as a type/interface key?

I had high hopes for achieving this, but unfortunately it's a no-go: type MyType< T extends {}, K extends string = 'keyName' > = T & { [K]: { value: string } }; The error states that a computed property name in a typ ...

The specified type 'IterableIterator<number>' does not belong to either an array type or a string type

Encountering an error while attempting to generate a dynamic range of numbers. Error: Type 'IterableIterator<number>' is not recognized as an array or string type. Use the compiler option '--downlevelIteration' to enable iteratio ...

Angular 2 form with ng2-bootstrap modal component reset functionality

I have implemented ng2-bs3-modal in my Angular 2 application. I am now looking for a way to clear all form fields when the close button is clicked. Can anyone suggest the best and easiest way to achieve this? html <button type="button" class="btn-u ...

Applying REGEX on input text in React Native

I'm having trouble getting my regex function to work correctly, so I believe there might be an error in my code. Any assistance would be greatly appreciated. Here is the regex function I am using: let validatePlate = (plate) => { var re = /(^[A ...

Set every attribute inside a Typescript interface as non-mandatory

I have defined an interface within my software: interface Asset { id: string; internal_id: string; usage: number; } This interface is a component of another interface named Post: interface Post { asset: Asset; } In addition, there is an interfa ...

Showing canvas lines while dragging (using only plain JavaScript, with React.JS if needed)

Is there a way to add lines with two clicks and have them visible while moving the mouse? The line should only be drawn when clicking the left mouse button. Any suggestions on how I can modify my code to achieve this functionality? Currently, the lines are ...

Having trouble importing the Renderer2 component in Angular

Trying to include Renderer2 with the following import: import { Renderer2 } from '@angular/core'; Encountering an error: "Module 'project/node_modules/@angular/core/index' does not have an exported member 'Renderer2'. Puzz ...

How to override or redefine a TypeScript class with generics

Presently, I am immersed in a project involving three.js and TypeScript. It has come to my attention that for organizing elements, the Group class is highly recommended. However, I have noticed that the type definitions for Group do not include a feature l ...

Deactivating Google Map Clustering for Individual Markers

I'm currently utilizing Angular 4, Google Maps v3, and Marker Clusterer v2 - all of which are the latest versions. I'm attempting to implement a straightforward example found in the official Google Maps documentation (https://developers.google.co ...

The directive [ngTemplateOutet] is functioning properly, however, the directive *ngTemplateOutlet is not functioning as expected

I have been struggling to create a component using ngTemplateOutlet to select an ng-template, but for some reason *ngTemplateOutlet is not working in this case (although [ngTemplateOutlet] is functioning correctly). Below is the code I am currently using: ...

Obtain abbreviated names for the days of the week starting from Monday to Sunday using JavaScript

Is there a way to retrieve the abbreviated names of each day of the week in JavaScript, starting from Monday through Sunday? ...

What are the specific purposes of utilizing semantic versioning (semver) notation within the package.json file?

Could someone clarify the specific distinctions between the semver notations found in package.json file? I'd appreciate a detailed explanation. ...