Les cycles obligatoires sont autorisés, mais peuvent entraîner des valeurs non initialisées. Envisagez de refactoriser pour supprimer le besoin d'un cycle

TL; DR: vous importez le module A dans le module B et le module B dans le module A, ce qui entraîne un cycle A 🡠'B ð'¡' A 🡠'B ðŸ¡' A ... , ce qui peut entraîner des erreurs. Résolvez cela en restructurant vos modules pour que le cycle se brise.

Réponse détaillée

En javascript si vous importez différents modules dans d'autres modules, toute cette importation génère une arborescence de dépendances:

                                 root_module
                          ┌───────────┴───────────┐
                    sub_module_A             sub_module_B
                                                 🡑 🡓
                                             sub_module_C

Lorsque vous exécutez votre code, tous les modules seront évalués de bas en haut ou des feuilles au tronc, de sorte que par exemple si vous importez les modules C et D dans le module B toutes les exportations de C et D sont déjà évaluées et ne sont plus indéfinies. Si le module B était évalué avant C et D , le module B ne fonctionnerait pas, car toutes les exportations de C et D ne seraient pas définies , puisqu'elles n'ont pas encore été évaluées.

Pourtant, il peut être possible de former des cycles dans votre arbre de dépendances (c'est pour cela que vous avez reçu un avertissement):

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

Problème: disons que l'évaluation commence maintenant avec le module C. Puisqu'il importe quelque chose du module B et qu'il n'a pas encore été évalué, le module C ne fonctionne pas correctement. Tous les éléments importés de B ne sont pas définis . Ce n'est en fait pas si mal, car à la fin, le module C est à nouveau évalué lorsque tout le reste a été évalué, de sorte que C fonctionne également. Il en va de même si l'évaluation commence avec le module B.

MAIS: Si votre code repose sur un module C fonctionnel depuis le tout début, cela entraînera des erreurs très difficiles à trouver. Par conséquent, vous obtenez cette erreur.

Comment résoudre: Dans votre cas, l'avertissement donne également une explication détaillée, où le cycle émerge. Vous importez native-radio-buttons/lib/segmented-controls.js dans node_modules/react-native-radio-buttons/lib/index.js et node_modules/react-native-radio-buttons/lib/index.js dans native-radio-buttons/lib/segmented-controls.js - native-radio-buttons/lib/segmented-controls.js . Il semble que le cycle soit placé à l'intérieur de certains de vos modules de nœuds. Dans ce cas, il est malheureusement impossible de résoudre ce problème par vous-même.

Si le cycle est dans votre propre code, vous devez extraire certaines exportations dans un troisième module / fichier, à partir duquel vous importez le code dans les deux modules formant précédemment le cycle.

Vous importez probablement quelque chose du «fichier A» dans le «fichier B», puis importez à nouveau quelque chose du «fichier B» dans le «fichier A». Examinez toutes les importations des deux fichiers et voyez s'il existe un tel cycle.

Pour éviter d'avoir à écrire plusieurs lignes de

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;

J'ai créé un fichier comp.js dans lequel je pourrais importer les composants au fur et à mesure de leur création et les exporter en tant que modules. Tous les composants sont alors accessibles depuis un seul endroit. Vous pouvez donc avoir quelque chose comme ça à un endroit ...

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

Maintenant, que se passe-t-il dans le moteur de rendu, par exemple lorsque SomeComponent est rendu ...

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

Dans l'exemple, SomeComponent pourrait être appelé dans l'application principale, et quand il rend, il demande également un composant du comp.js C'est ce qui déclenche l'avertissement de cycle Require car un module qui a été importé d'un endroit, est alors rendu et demandant d'importer un autre module à partir du même endroit où il a été rendu.

Que pensez-vous de cela, devrais-je revenir à l'utilisation d'instructions d'importation unique ou pensez-vous qu'il y a un danger à utiliser l'exportation du module tel qu'il est actuellement configuré?

Dans mon cas, j'ai vendu le même problème dans la navigation native de réaction.

Ce que j'ai fait ?

J'utilisais déjà la react-navigation comme ci react-navigation dessous

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

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

et puis je le consommais comme:

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

Mais j'ai mis à jour comme ci-dessous et l'avertissement est parti.

import {containerRef} from 'filename';

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

et puis je le consommais comme:

 export const containerRef = createRef();

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

Dans mon cas, l'avertissement était comme ça;

Cycle requis: src \ views \ TeamVerification.js -> src \ components \ TeamVerificationListItem.js -> src \ views \ TeamVerification.js Les cycles requis sont autorisés, mais peuvent entraîner des valeurs non initialisées. Envisagez de refactoriser pour supprimer la nécessité d'un cycle.

Comme il l'indique, TeamVerification importait TeamVerificationListItem et TeamVerificationListItem importait également TeamVerification. C'était une importation inutilisée, mais après l'avoir supprimée, l'avertissement a disparu.

Veuillez vérifier si vous avez importé les mêmes détails dans ce fichier. (c'est à dire)

votre fichier étant en tant que actions / repas.js et vous avez ajouté la ligne dans le même fichier comme

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

Dans mon cas, j'ai eu le même avertissement après l'installation d'un 'package'

et dans leur documentation, il s'agissait d' import SomeFunc from 'package'

et instantanément l'avertissement est apparu

Les cycles obligatoires sont autorisés mais peuvent entraîner des valeurs non initialisées. Envisagez de refactoriser pour supprimer la nécessité d'un cycle.

mais dès que j'ai déstructuré le SomeFunc il n'y avait plus d'avertissement

import {SomeFunc} from 'package'

veuillez regarder la déstructuration

Certaines importations provoquent cet avertissement si elles sont effectuées via le mot clé require . Remplacez-les par import instructions d' import et vous serez prêt à partir. Par exemple,

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

REMARQUE: cela peut varier d'un projet à l'autre. Pour une compréhension détaillée de require vs import, reportez-vous à ce lien .