react-native require cycle how to fix it?-CodePudding

I have some modals and I get this error:

 WARN  Require cycle: src\components\Modal\index.ts -> src\components\Modal\ModalAddress\ModalAddress.tsx -> src\components\Modal\index.ts

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
 WARN  Require cycle: src\components\Modal\index.ts -> src\components\Modal\ModalShopInfo\ModalShopInfo.tsx -> src\components\ParentReviews\index.ts -> src\components\ParentReviews\ParentReviews.tsx -> src\components\Modal\index.ts

Modal folder is like this

-Modal
--index.ts
---/ModalAddress
---/ModalShopInfo

index.ts

export { default as ModalAddress } from './ModalAddress /ModalAddress';
export { default as ModalShopInfo } from './ModalShopInfo/ModalShopInfo';

export * from './ModalAddress/Model';
export * from './ModalShopInfo/Model';
...

What I am doing wrong ?

CodePudding user response：

Move the shared code or state from the ModalAddress and ModalShopInfo modules into a separate module, and then import that module into both ModalAddress and ModalShopInfo instead of importing each other. This should break the require cycle and allow your code to run without errors.

It's because a require cycle occurs when a module imports another module that imports the original module. This creates a circular dependency where each module is dependent on the other, which can result in uninitialized values and cause errors in your code. To solve that you can refactor your code to remove the circular dependency. Like; you can move the shared code or state into a separate module that both the original module and the imported module can import and use. This will break the circular dependency and allow your code to run properly.