Circular dependency when importing types from other features

[SevenOutman]

Discussed in #39

^{Originally posted by SevenOutman October 9, 2021}
It's a common scenario when we import type definitions from other features, especially definitions for resources (fetched from APIs). If we expose everything from only the index.ts to other features, it's easy to encounter circular dependency.

For example, if I'm writing a components in teams feature where type User from users feature is used:

// teams/components/MyComponent.ts
import type { User } from '@/features/users';

That will cause components from users to also be loaded because I re-exported them from users/index.ts.

// users/index.ts
export * from './types';
export * from './components';

Meanwhile I have a component in users feature that imports type Team from teams feature:

// users/component/MyComponent.ts
import type { Team } from '@/features/teams';

Now my teams/components/MyComponent.ts and users/component/MyComponent.ts forms a circular dependency.

My solution is to import types from other features directly from their ./types.ts, which means that ./index.ts is not reguarded as the only port of a feature.

Same problem exists with importing APIs from other features. Any idea?

[alan2207]

Well, if my understanding of ES modules is correct, I don't think that would be the case.

If you import a type like this:

import type { Team } from '@/features/teams';

You will import just what you specified, not everything that module is exporting. You can potentially have a circular dependency but that could happen unrelated to the ./index.ts entry point of a feature.

Can you provide a codesandbox where you can reproduce the issue?