Circular dependency detected between unrelated functions

Question

I'm running into a circular dependency detected warning in an Angular app using individually exported functions from two utility files. I'll show a simplified example of the two files below.

The first file:

// type-helper.ts
import {getPropertyIfExists} from "./helper";

export function isType(item: any, type: string, property?: string) {
  const target = getPropertyIfExists(item, property);
  if (typeof type !== "string") return false;
  else return typeof target === type;
}

export function isArray(item: any[] | any): item is any[] {
  return item && Array.isArray(item);
}

export function isObject(item: object | any): item is object {
  return item && typeof item === 'object';
}

The second file:

// helper.ts
import {isArray, isObject} from "./type-helper";

export function getPropertyIfExists(item: any, property?: string): any {
  if (property) return item[property];
  else return item;
}

export function removeUndefinedProperties<T>(obj: T): T {
  const keys = Object.keys(obj);
  for (const key of keys) {
    if (isArray(obj[key])) obj[key] = removeEmptyValuesFromArray(obj[key]);
    else if (isObject(obj[key])) obj[key] = removeUndefinedProperties(obj[key]);
    else if (item === undefined || item === null) delete obj[key];
  }
  return obj;
}

Both of these files provide small utilities that I like reusing in my application without necessarily being linked to a single service. As far as I can tell, there are no other links between these files.

So, my questions:

Is the warning expected behaviour? I understand the warning if you have circular dependencies between components and services, where the entire class is imported, but in this case there is no circular dependency between the items actually being imported.
If it's not a problem, is there a way to make the warning disappear for this specific situation (without removing the warning from other circular dependencies)?

Thanks!

you can show the folder structure where these files are?

Chris
– Chris

2020-04-09 16:37:22 +00:00
Commented Apr 9, 2020 at 16:37 — Chris
– Chris, Commented Apr 9, 2020 at 16:37
They're both in the "/src/app/utilities" folder.

DG1
– DG1

2020-04-09 16:59:01 +00:00
Commented Apr 9, 2020 at 16:59 — DG1
– DG1, Commented Apr 9, 2020 at 16:59

Chris · Accepted Answer · 2020-04-09 18:28:36Z

1

index.ts from utilities folder is a barrel module (A barrel is a way to rollup exports from several modules into a single convenient module. The barrel itself is a module file that re-exports selected exports of other modules.)

You cannot import the barrel module itself. Because the circular dependence will appear. (an infinite loop of imports will be made)

index.ts
  type-helper.ts
  helper.ts

helper.ts -> index.ts -> type-helper.ts
                      -> helper.ts -> index.ts -> type-helper.ts
                                               -> helper.ts

To prevent this, you need to import the exact patch

// helper.ts
// import {isArray, isObject} from "./helper";
import {isArray, isObject} from "./helper/type-helper";

export function getPropertyIfExists(item: any, property?: string): any {
  if (property) return item[property];
  else return item;
}

export function removeUndefinedProperties<T>(obj: T): T {
  const keys = Object.keys(obj);
  for (const key of keys) {
    if (isArray(obj[key])) obj[key] = removeEmptyValuesFromArray(obj[key]);
    else if (isObject(obj[key])) obj[key] = removeUndefinedProperties(obj[key]);
    else if (item === undefined || item === null) delete obj[key];
  }
  return obj;
}

You probably have helper.ts instead of index.ts

it's the same thing

helper.ts -> type-helper.ts -> helper.ts -> type-helper.ts ...

move the getPropertyIfExists() function into type-helper.ts

edited Apr 9, 2020 at 18:28

answered Apr 9, 2020 at 17:43

Chris

2,45616 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DG1 Over a year ago

Thanks for the answer! just so that I'm clear, are you saying that an index.ts/barrel file is generated automatically? I haven't created any barrel files myself, I'm simply importing the functions directly from the file references. With that said, I noticed that the simplified code mistakenly showed the helper file importing "./helper". It actually imports the functions from "./type-helper".

Chris Over a year ago

index.ts you need to create it yourself, it is not created automatically

DG1 Over a year ago

So that's what I was unsure about, if I import a specific function from a file into another function, does it import all the other, unrelated dependencies in that file with the function? Because the "getPropertyIfExists" function requires no imports, I assumed importing it would be roughly the same as simply copying and pasting that function into the file without pulling any other imports with it.

Chris Over a year ago

all functions in a file are exported in one module

Collectives™ on Stack Overflow

Circular dependency detected between unrelated functions

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related