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:

Require cycle: node_modules/react-native-radio-buttons/lib/index.js -> node_modules/react-native-radio-buttons/lib/segmented-controls.js -> node_modules/react-native-radio-buttons/lib/index.js

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

I appreciate any suggestions. Thanks

Answer 1

TL;DR: You import module A into module B and module B into module A resulting in a cycle A → B → A → B → A ..., which can result in errors. Resolve that by restructuring your modules, so that the cycle breaks.

---

Detailed Answer

In javascript if you import different modules into other modules all this importing generates a dependency tree:

                                 root_module
                          ┌───────────┴───────────┐
                    sub_module_A             sub_module_B
                                         ┌────────┴────────┐
                                   sub_module_C       sub_module_D

When you run your code, all modules will be evaluated from bottom to top or from leaves to the trunk, so that for example if you import modules C and D into module B all exports of C and D are already evaluated and not undefined anymore. If module B would be evaluated before C and D, module B would be not working, because all exports from C and D would be undefined, since they have not been evaluated yet.

Still, it can be possible to form cycles in your dependency tree (this is what you got a warning for):

                                 root_module
                          ┌───────────┴───────────┐
                    sub_module_A             sub_module_B
                                                 ↑ ↓
                                             sub_module_C

Problem: Let's say the evaluation starts now with module C. Since it imports something from module B and it has not been evaluated yet, module C is not working correctly. All imported stuff from B is undefined. This actually is not that bad, since in the end module C is evaluated once again when everything else has been evaluated, so that also C is working. The same goes if evaluation starts with module B.

BUT: If your code relies on a working module C from the very beginning, this will result in very hard to find errors. Therefore you get this error.

How to solve: In your case the warning also gives a detailed explanation, where the cycle emerges. You import native-radio-buttons/lib/segmented-controls.js in node_modules/react-native-radio-buttons/lib/index.js and node_modules/react-native-radio-buttons/lib/index.js in native-radio-buttons/lib/segmented-controls.js. It seems like the cycle is placed inside some of your node modules. In this case there is unfortunately no way you could solve that by yourself.

If the cycle is in your own code, you have to extract some exports into a third module / file, from which you import the code into both modules previously forming the cycle.

Answer 2

You are probably importing something from "file A" into "file B", then importing something again from "file B" into "file A" . Examine all the imports from both the files and see if there's any such cycle.

Answer 3

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 (
    <>
    <AnotherComponent />
    <View><Text>EXAMPLE OF SOMECOMPONENT</Text></View>
    </>
)
}
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?

Answer 4

I my case, I have sold the same problem in react-native navgiation.

What I did ?

Already I was using react-navigation like below

 export const containerRef = createRef();

 function App(){
   return (
     <NavigationContainer ref={containerRef}>
       ....
     <NavigationContainer>
   );
 }

and then I was consuming it like:

import {containerRef} from 'filename';

onPress = ()=> containerRef.current.navigate('Chat');

But I updated like below and warning has gone.

 function App(){
   return (
     <NavigationContainer> // removed ref
       ....
     <NavigationContainer>
   );
 }

and then I was consuming it like:

import { useNavigation } from '@react-navigation/native';

onPress = ()=> useNavigation.navigate('Chat');