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

Seep

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.

Kesler

Adding to @Peter answer If you are importing from same index file please try importing individually. – Herve

These warnings are cause by 3rd packages in node_modules folder. How should we go about it? Having this issue for react-native-paper as well – Earpiece

Well, correct behavior of a package is solely the authors responsibility. The only thing you can do is opening an issue on github page of the package or abandon it. You can also just ignore the warning, since it is not critical in most cases. – Kesler

i want to share, btw i also have same issue , this is my issue ISSUE: Require cycle: src/components/index.js -> src/components/molecules/index.js -> src/components/molecules/InputChat/index.js -> src/components/index.js Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. CAUSED: import {Button} from '../../'; SOLUTION: import {Button} from '../../atoms'; so you the problem shown because autoimport not write it detail to specify folder. i hope its help. sharing is caring :) Thanks – Moise

Hi, i have a login navigator to ask the user for their password if password is correct user gets navigated to App navigator and when the user decides to logout they go back to login navigator, this is my flow. I keep getting the require cycle login>app>login how do i fix this? – Mechanical

I had this issue whit js and scss files, it had the same names. At sass files is the name.scss filetype needed. Thanks to @Peter for this nice explanation. – Hellraiser

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.

Acquittal

This answer was far clear to identify the real reason. Thanks – Cerell

i would say this is a KISS answer! +1 – Horney

yes you are right but what is the solution? you are explaining problem – Hubble

@KhurshidAnsari Examine all the imports from both the files and see if there's any such cycle. – Bikini

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?

Molybdenite

I'm having the exact same problem. In my case, I've got a shared module "helpers". The index.js file is importing and exporting Lodash and a notifier helper. In my notifier, I'm destructuring Lodash from index.js. This is just one simple case I've got a lot of cyclic problems in my app similar to the one above with the shared module. – Impulsive

I have the same issue. But nothing in my app breaks, I just get loads of warnings. Still trying to figure out if there is a real risk here or not ... – Bess

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');

Pry

Answer 5

This occurs if your code contains cyclic dependencies. If these dependencies exist within your own libraries, you can easily fix them. But if this is happening in 3rd party libraries, you can't do much except waiting for the developers to fix these.

Another reason might be this: Some imports cause this warning if they're done through the require keyword. Replace these with import statements and you might be good to go. For example,

const abc = require("example"); // Don't use this syntax
import abc from "example"       // Use this syntax instead

NOTE: This might vary from project to project. For a detailed understanding of require vs import, refer to this link.

Uncommon

Answer 6

In my case the warning was like this;

Require cycle: src\views\TeamVerification.js -> src\components\TeamVerificationListItem.js -> src\views\TeamVerification.js Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

As it indicates, TeamVerification was importing TeamVerificationListItem and TeamVerificationListItem was also importing TeamVerification. It was an unused import but after I remove it the warning gone.

Truman

Answer 7

As others have already mentioned, for your own packages

1. Move things required within two modules by each other into a third module
2. Avoid imports from barrel-files (index.ts/js) or aliases (@mycompany/my-module) if you are within the same "my-module"

What others have not mentioned (and which seems to be the problem for OP), for packages not within your responsibility (eg node_modules from NPM), the only thing you can do is

1. Disable the warning. It will still show up in metro console, but no more yellow warning snackbar: import { LogBox } from 'react-native'; LogBox.ignoreLogs(['Require cycle: node_modules/']); You can place the code in App.tsx, for example.
2. Modify the package contents of the node_modules itself and patch the package contents after every npm install via patch-package => I think this is an overkill if the circular imports don't produce actual errors

Hearsh

Answer 8

You should use the Relation wrapper type in relation properties in ES Modules projects to avoid circular dependency issues, just click here: https://typeorm.io/#relations-in-esm-projects

Highpressure

Answer 9

In my case, i had the same warning after the installation of a 'package'

and in their documentation, it was import SomeFunc from 'package'

and instantly the warning showed up

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

but as soon as I destructure the SomeFunc there was no more warning

import {SomeFunc} from 'package'

please look at the destructuring

Shroyer

Answer 10

I used react-native-maps in my project and I got the same error.

Just upgraded from 0.27.1 -> 0.28.0.

I can confirm that this issue is fixed.

Thank you

Clorindaclorinde

Answer 11

in my own case it was like this

Require cycle: Components/Navigation/AuthStack.js - Components/Navigation/AppStack.js -> Components/Screen/Passanger.js -> Components/Navigation/AuthStack.js

so i had unused imports just commented the unused imports and refresh my simulator and it was good.

Halda

Answer 12

Unused Imports

It may cause due to unused imports includes in your file. Please Remove them and check

Pilcher

Answer 13

Inside rn-fetch-blob Library in node_modules/

in all these 4 files: Blob.js, Fetch.js, FileReader.js, XMLHttpRequest.js

replace the below import statement

import RNFetchBlob from '../index.js'

with following lines.

import {NativeModules} from 'react-native';

const RNFetchBlob = NativeModules.RNFetchBlob

Actionable

Answer 14

if use NavigationContainer in @react-navigation/native

import {createRef} from 'react';

<NavigationContainer ref={createRef()}>

Segmental

this is incomplete answer – Hubble

Answer 15

Please check whether you have imported same details within that file. (i.e)

your file being as a actions/meals.js and you have added the line in the same file like

import { Something } from './actions/meals.js'

Packer