Warning and errors when using casl & vue

Viewed 543

I'm trying to install @casl/ability and @casl/vue in my vueJS app but can't seem to be able to make it work. I don't know if I'm doing something wrong or if the integration with the Quasar Framework might break something.

casl.js (called in quasarconf)

import Vue  from 'vue';
import { abilitiesPlugin } from '@casl/vue';
import ability from '../services/ability';

Vue.use(abilitiesPlugin, ability)

./services/ability

import { AbilityBuilder, Ability } from '@casl/ability'

export default function defineAbilityFor(user) {
  const { can, cannot, build } = new AbilityBuilder(Ability);

  can('readOwnData', 'all')
  can('readManagerData', 'all')
  can('readSquadData', 'all')

  return build();
}

I'm getting those warnings

 WARNING  Compiled with 4 warnings                                   10:50:50 AM

 warning  in ../node_modules/@casl/vue/dist/es5m/index.js

"export 'defineComponent' (imported as 't') was not found in 'vue'

 warning  in ../node_modules/@casl/vue/dist/es5m/index.js

"export 'inject' (imported as 'n') was not found in 'vue'

 warning  in ../node_modules/@casl/vue/dist/es5m/index.js

"export 'provide' (imported as 'r') was not found in 'vue'

 warning  in ../node_modules/@casl/vue/dist/es5m/index.js

"export 'ref' (imported as 'i') was not found in 'vue'

And this error in the console

index.js?0c5a:1 Uncaught TypeError: Object(...) is not a function
    at eval (index.js?0c5a:1)
    at Module.../node_modules/@casl/vue/dist/es5m/index.js (vendor.js:23)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (casl.js?8d6e:1)
    at Module../src/boot/casl.js (app.js:1137)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (client-entry.js:24)
    at Module../.quasar/client-entry.js (app.js:1019)
1 Answers

I will suggest you install this version below, it resolved the issue. I guess there's issue with the current version for vue

"@casl/ability": "^3.3.0",
"@casl/vue": "^0.5.1",
Related