Vuex ORM models dependency cycle - vuex

Question

In the store, I have two related models: Company and User
User
import { Model } from '#vuex-orm/core';
import { Company } from './models';
export class User extends Model {
static entity = 'users';
static fields() {
return {
company: this.belongsTo(Company, 'company_id'),
};
}
}
export default User;
Company
import { Model } from '#vuex-orm/core';
import { User } from './models';
export class Company extends Model {
// This is the name used as module name of the Vuex Store.
static entity = 'companies';
static fields() {
return {
account_manager: this.belongsTo(User, 'account_manager_id'),
};
}
}
export default Company;
To avoid dependency cycle, I closely followed the solution from https://vuex-orm.org/guide/model/single-table-inheritance.html#solution-how-to-break-cycles
and import Company and User into models.js
Models
export * from './company';
export * from './user';
Yet I still get the dependency cycle error from the linter.
I run out of ideas.
Code sample: https://github.com/mareksmakosz/vuex-orm-dependency-cycle

Answer 1

This is just ESLint enforcing the rule, you can't avoid it if you're using airbnb. Consider eslint:recommended if it's truly a pain.
Alternatively, if you want to keep airbnb and your models separated, I suggest dropping the imports and define your relations using entity as a string.
this.belongsTo('companies', 'company_id')
this.belongsTo('users', 'account_manager_id')