Closed OctaneInteractive closed 5 years ago
Having made no changes, I'm now getting another error:
ERROR in ../node_modules/@casl/ability/dist/es5m/index.js Module build failed: Error: ENOENT: no such file or directory, open 'path_redacted/node_modules/@casl/ability/dist/es5m/index.js'
... with:
import ability from '@casl/ability'
new Vue({
el: '#app',
router,
store,
ability,
template: '<App/>',
components: { App }
})
Hi,
Have you tried to run example app (https://github.com/stalniy/casl-vue-example)?
What I can say you that it looks like you are trying to do everything except reading docs :)
Please check these Readme files as well:
I looked at the example but it's far too complicated to understand — for instance, the example deviates from the documentation in how ability
is imported (in the example, it's in a "*.js" file), and it doesn't explain how the user ID (or other parameters) are passed into the ability
object.
Yes, I've read both of those documents, but — as I said — the example deviates from the documentation, and it's far too complex.
What would make far more sense, would be to provide a basic minimum configuration that matches the documentation.
Also, you haven't explained the reasons for the multiple errors on the initial import; I removed the code from the Vue component, to isolate the errors, and the import isn't working.
The example doesn't diviate from docs.
Ability
instance:
in example: https://github.com/stalniy/casl-vue-example/blob/master/src/config/ability.js#L14
in docs: https://stalniy.github.io/casl/#1-define-abilitiesAbility
instance inside
in example, https://github.com/stalniy/casl-vue-example/blob/master/src/main.js#L4-L5
in docs https://github.com/stalniy/casl/blob/master/packages/casl-vue/README.md#1-including-pluginSo, where do you see deviation?
You won't find something like the code below in the docs:
import ability from '@casl/ability'
To answer you questions: you just completely incorrectly trying to include casl in your vue app.
import ability from './ability'
without defining ability.js
in side folder where you have main.js
. That's why vue cli (or webpack) said you that such module doesn't existimport ability from '@casl/ability'
I don't know why you did this because if you check docs you will understand that @casl/ability
exports 2 main classes Ability
and AbilityBuilder
Error in render: "TypeError: _vm.$can is not a function"
P.S.: it's open source, if you think you can improve something I'm ready to review your fix to docs or code. I do this project in my free private time.
Just follow the docs, debug the example and you will understand. You are asking very basic questions which are highlighted in docs. Junior developer from my team was able to include casl in our project, so I believe you also will do this.
Close as there is nothing to fix casl side.
Thanks for the interest to casl.
Feel free to ask more questions in gitter chat or on stackoverflow
In the main documentation for the repo, there's no mention of using a "config.js" file, but then you use one in the example — that's one deviation, of which there are several others, which makes it confusing to follow and difficult to get anything working.
Another example is: "1. Including plugin" — where? You make no mention, when it could be either "main.js" or the component.
In: "2. Defining Abilities" you mention import ability from './ability'
but don't explain that this is a file the developer is supposed to create.
In: "4. Provide ability for a components tree":
export default {
name: 'TodoList',
ability: AbilityBuilder.define(can => {
...
})
}
... it would have been useful to have provided some code where there is the "...", such as passing in a variable for a user ID or similar, and I've found no such example.
I've spun the project up and got another warning, this time on the command line:
WARNING Compiled with 1 warnings >19:56:05 warning in ./src/main.js 27:11-18 "export 'default' (imported as 'ability') was not found in '@casl/ability'
Again, I've changed nothing in "main.js", which also makes things much more difficult to follow and understand.
I appreciate the hard work and dedication you've made, but so far what little I've got working has been scavenged from articles found via Google and not here, which is unfortunate.
config.js
is not part of CASL. This file may have any name and is not required. The thing which is required inside file. CASL don’t care how you organize your project or filesystem.
The place where you need to include a plugin is documented in Vue docs. Usually you will do this in main.js
I expect a developer to understand that ./ability
is a relative file, not npm module. Also you can see this in example.
The warning says you that you incorrectly using import. This is not warning generated by CASL but a warning from webpack (or similar tool)
Sorry that there is no more fluent getting started article. I plan to work on it some day, when I have more time for CASL. Currently very busy at the my current job (you can track this issue https://github.com/stalniy/casl/issues/144)
Start from main.js
and just follow imports.
About login you may find answer on stackoverflow. Somebody has asked me this some time ago
Hi!
I'm using Vue 2.5.2, and this is an existing and stable application I'm hoping to improve with CASL.
So far, nothing I've tried works, and that includes the
import ability from './ability'
which gave me errors:I switched to:
import ability from '@casl/ability'
which gives me the following warnings:... and the errors:
In the "main.js" file, I have:
In the "App.vue file, I have:
I'm assuming this is how I use the
this.userGroupID
parameter, but I have no idea if it is working or not, given the multiple warnings and errors, and I have no idea what to do withability
, since there's no guidance in the documentation, in the context of Vue.I tried using the
Can
package, but that created more warnings and errors, so I had to abandon that.Some assistance would be much appreciated.