DEV Community

Discussion on: Dependency cycle detected in React component index file

Collapse
 
dan_v profile image
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.

Collapse
 
kcouliba profile image
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.