Apenas estoy comenzando con casl y parece que me falta algo. Creé un archivo llamado can.js y es exactamente como el ejemplo en los documentos :

 import { createContext } from 'react'; import { createContextualCan } from '@casl/react'; export const AbilityContext = createContext(); export const Can = createContextualCan(AbilityContext.Consumer);

en mi App.tsx estoy usando

 let caslAbilities = new Ability(abilitiesJson); // from an API call returning json formatted abilities as described in docs <AbilityContext.Provider value={caslAbilities}> <Main /> </AbilityContext.Provider>

Luego dentro Main.ts defino algunas rutas como esta:

 import {Can} from "../Auth/can"; // the file defined above <Can I={"read"} a={"Post"}> // this should always be false with my test abilities json <Route path="/reporting"> <ReportingHome /> </Route> </Can>

Cuando hace clic en la ruta restringida, la aplicación arroja un error:

 Uncaught TypeError: t.on is not a function

¿Me estoy perdiendo algo obvio?