React CASL conditions not working in production mode - Reactjs

Question

I have a can function with condition. To enable composing messages when the condition satisfies. This is working perfectly in development mode, But when I try to run it in Production mode, The can method always gives me false

can('compose', 'Ticket', {
   phase: 'Tier 3',
});

const ticket = new Ticket({ phase: 'Tier 3' })
const canCompose = (ability.can('compose', ticket));

But canCompose always return false in production mode. Do I have to change anything in configuration?

Answer 1

Yes, in production mode all class names and function names are mangled (i.e., minified). That's why CASL can't determine subject type correctly.

This is written in documentation about subject type detection.

So, you have 2 options:

1. Use classes instead of strings when define and check abilities per type

   class Ticket {}
   can('compose', Ticket, { ... });
   
   ability.can('compose', Ticket);
   ability.can('compose', new Ticket(...))
   

2. Or define static modelName property on your classes:

   class Ticket {
     static modelName = 'Ticket'
   }
   
   can('compose', 'Ticket', { ... });
   
   ability.can('compose', 'Ticket');
   ability.can('compose', new Ticket(...))