BalmUI clashes with vuex types

[samul-1]

"balm-ui": "^10.4.0" "vuex": "^4.0.2", "vue": "3"

I have a file shims-vuex.d.ts with the following content:

import { SharedState, TeacherState, StudentState } from "./store/types";
import { Store } from "vuex";

declare module "@vue/runtime-core" {
  interface State {
    shared: SharedState;
    teacher: TeacherState;
    student: StudentState;
  }

  interface ComponentCustomProperties {
    $store: Store<State>;
  }
}

as soon as I use BamlUI in my main.ts file like this:

import BalmUI from "balm-ui";
import "balm-ui-css";

const app = createApp(App);
app
  .use(BalmUI)
  .mount("#app")

all the spots where I do this.$store in my components raise errors like: Property 'getters' does not exist on type 'ComponentInternalInstance'. and the project fails to compile.

I suspect for some reason the type Store being used when I try to access $store in my components is BalmUI's and not the one I defined inside of my shims file.

How can this be fixed?

[elf-mouse]

Duplicate of #129

You need rename $store for BalmUI

[elf-mouse]

Hi @samul-1 ,

BalmUI does not enable the built-in $store by default in v10.4.1, you can try it again :)

Thanks a lot :)

[samul-1]

Hello @elf-mouse, I just tried again with v10.4.1 and the issue hasn't gone away. The same errors still appear. :(

[samul-1]

Dunno if that helps, but the issue appears to occur as soon as I import BalmUI from "balm-ui";

even if I then don't add app.use(BalmUI), the issue still occurs.

EDIT: I don't think my issue is a duplicate of #129. That one appears to be a JS-related error, mine is a type related error. The export declare type Store = ComponentInternalInstance in plugins.d.ts clashes with vuex Store type. That's where the issue is at. I tried commenting that type declaration out and the package works.

[elf-mouse]

Yes, this is a problem with the definition of typescript.

You can refer to this example and redefine your store for TS.

[samul-1]

There is absolutely nothing about vuex in the example you linked. In fact, it's not even in the dependencies of that project's package.json. After wasting two days trying to make it work, I decided I'm not going to use this library.

[elf-mouse]

It is perfectly fine to install and use vuex on the basis of the example here (I tested it before)

Still, thank you very much for your question.

Have a great day :)