#StackBounty: #react-native #circular-dependency #madge Circular dependency issue while exporting from single file using babel-module-r…

Bounty: 50

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.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.