Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle

Question

I am receiving this warning message in my chrome console for my react-native project. Do you have any idea why I am getting this?

This is the complete message:

Answer 1

To prevent from having to write multiple lines of

import SomeComponent from "../components"
import AnotherComponent from "../components"
import AndAnotherComponent from "../components"
import AndOneMoreComponent from "../components"

I created a comp.js file where I could import the components as they are created and export them as modules. All components are then able to be reached from one place. So you can then have something like this in some place...

import { SomeComponent, AnotherComponent, AndAnotherComponent, AndOneMoreComponent} from './comp'

Now what happens in the renderer for example when SomeComponent is rendered....

import * as React from "react";
import { AnotherComponent} from '../comps';
import { View, Text } from "react-native";

function SomeComponent() {
return (
    <>
    
    EXAMPLE OF SOMECOMPONENT
    
)
}
export default SomeComponent;

In the example, SomeComponent could be called in the main App, and when it renders it also asks for a component from the comp.js This is what triggers the Require cycle warning because a module that was imported from one place, is then rendering and asking to import another module from the same place it was rendered from.

What are your thoughts on this, should I revert back to using single import statements or do you think there is a danger in using the module export as it is currently setup?