Circular dependency issue while exporting from single file using babel-module-resolver

Question

I was working on a react native project and while perfoming hot reloading app goes into cyclic recursion resulting in maximum call stack exceeded. More details of this issue can be found here

From here I realised that there is something wrong and circular dependencies are getting created.

I decided to give madge a try and see whats going on in the project. After running the command I saw quite a number of circular dependencies.

Now since my project is quite huge debugging that was quite a task so I created a small version of my project containing a single folder.

I created a utils folder in which I have 4 files: -

1. utils/index.js
2. utils/device-helper.js
3. utils/init.js
4. index.js

For imports I am using babel-module-resolver

utils/init.js

import {deviceInfo} from "utils";

export const init = () => {
  // initialising app and calling backend API with device info
};

utils/device-helper.js

import DeviceInfo from "react-native-device-info";

const API_LEVEL = "v0";

export const deviceInfo = () => {
  try {
    return Object.assign({}, {
      apiLevel: API_LEVEL,
      deviceId: DeviceInfo.getUniqueID(),
      device: DeviceInfo.getDeviceName(),
      model: DeviceInfo.getModel(),
      osVersion: DeviceInfo.getSystemVersion(),
      product: DeviceInfo.getBrand(),
      country: DeviceInfo.getDeviceCountry(),
      appVersion: DeviceInfo.getVersion(),
      manufacturer: DeviceInfo.getManufacturer(),
      userAgent: DeviceInfo.getUserAgent(),
      buildNumber: DeviceInfo.getBuildNumber(),
      bundleId: DeviceInfo.getBundleId()
    });
  } catch (e) {
    //  TODO: Report to Bugsnag
    return {};
  }
};

utils/index.js

export * from "./init";
export * from "./device-info-helper";

index.js

export * from "./utils"; 

After running madge command I get following :-

tests-MBP:madge-test harkirat$ madge --circular  index.js
Processed 4 files (684ms)

✖ Found 1 circular dependency!

1) utils/index.js > utils/init.js

However, if i change utils/init.js to following it works:-

utils/init.js

import {deviceInfo} from "./device-helpers";


export const init = () => {
  // initialising app and calling backend API with device info
};

I am not able to understand the cause of this circular dependency. Can someone please help?

Here is link to the repository.

Answer 1

I don't see a .babelrc in the repo, but here is what I think:

1. In utils/init.js you import using:

import {deviceInfo} from "utils";

That is same as:

import {deviceInfo} from "./utils/index";

2. In utils/index.js you do a export * from "./init". This export from basically first imports all the contents of ./utils/init and the reexports it.

So:

• utils/init.js imports from ./utils/index
• ./utils/index.js imports from ./utils/init

There is your circular dependency.