Dependency cycle detected in React component index file

Hi all. Wondering whether someone could help me understand and resolve a dependency cycle in my React project.

I decided to use an index.js file to handle my component exports. The file structure of my components folder looks ike this:

components
├── ComponentA
│ └── ComponentA.jsx
├── ComponentB
│ └── ComponentB.jsx
└── index.js

Here are the files involved in the dependency cycle:

// index.js
import ComponentA from "./ComponentA/ComponentA"; // <-- Eslint: 'Dependency cycle detected.eslint(import/no-cycle)'
import ComponentB from "./ComponentB/ComponentB";

export { ComponentA, ComponentB };

// ComponentA.jsx
import { ComponentB } from "../index";
// ... rest of component ...
export default ComponentA;

In 'index.js', eslint is detecting a dependency cycle for ComponentA. I've tried to work out why this is and how to fix it but no luck so far. I know it must be something to do with ComponentA importing ComponentB, and then them both being imported and exported in index.js.

The app still runs fine but I don't want to ignore this linting issue. I would be really grateful for any help in understanding and fixing this.

Thanks in advance

Daniel

Comments

[Dan V]

So I read the docs for eslint's "import/no-cycle" rule:

"Ensures that there is no resolvable path back to this module via its dependencies." (github.com/benmosher/eslint-plugin...)

index.js imports ComponentA. ComponentA imports ComponentB from index.js. Hence index.js imports a component which references index.js (itself).

I'm kinda tempted to get rid of my index.js file and just import components directly from their respective component files. This is for a tech test and I've spent far too much time stuck on this issue. However, if anyone is able to shed some light on the best way to resolve this issue, I'd still be interested to hear.

Thanks all.

[Coulibaly Daba Kevin]

Hey Dan,

There are probably multiple solutions to tackle cyclic-dependencies. But maybe the render props technique could be appropriate. It would probably need some adjustments to fit your case, but it is a solution I sometimes use for problems of this kind.

I hope this helps.

[Mohammad Jibin]

Hey Dan,

I just came across this post for the first time after running into the same problem. This post helped me see where exactly my linting error is.

Instead of removing the index.js file, I removed the ComponentB import (in your code) and imported it in ComponentA directly. That seems to fix the error.

I am considering the index.js file as a gateway to the master directory (components, containers etc.), and therefore sibling components can directly call each other instead of using the gateway.

Hope that helps!