React-native: [0.57.0] metroRequire errors: Require cycles are allowed, but can result in uninitialized values...

[fungilation]

Environment

  React Native Environment Info:
    System:
      OS: Windows 10
      CPU: x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
      Memory: 7.31 GB / 15.95 GB
    Binaries:
      Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.4.0 - C:\Program Files\nodejs\npm.CMD

Description

Require cycle: node_modules\react-native\Libraries\Network\fetch.js -> node_modules\react-native\Libraries\vendor\core\whatwg-fetch.js -> node_modules\react-native\Libraries\Network\fetch.js

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

With the packages my app uses, I count more than 10 similar errors from various packages.

Reproducible Demo

Should be reproducible in any app. I'm testing mine on Android, on Windows. For the expanded error in screenshot above, it's on RN's fetch().

My package.json

{
  "name": "wonderswipe",
  "version": "0.0.1",
  "private": true,
  "eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 7,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "browser": false,
      "node": true
    },
    "plugins": [
      "react",
      "react-native"
    ],
    "rules": {
      "comma-dangle": [
        2,
        "always-multiline"
      ],
      "semi": [
        2,
        "never"
      ],
      "react-native/no-unused-styles": 2,
      "react-native/split-platform-components": 2
    }
  },
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "babel-plugin-idx": "^2",
    "he": "^1.1.0",
    "lodash": "^4.17.2",
    "metro-react-native-babel-preset": "0.43.5",
    "moment": "^2.19.0",
    "moment-timezone": "^0.5.10",
    "node-summary": "../node-summary",
    "react": "16.4.1",
    "react-native": "0.57.0-rc.0",
    "react-native-actionsheet": "^2.4.2",
    "react-native-blur": "^3.2.0",
    "react-native-cached-image": "../react-native-cached-image",
    "react-native-code-push": "^5.3",
    "react-native-custom-tabs": "^0.1.7",
    "react-native-easy-toast": "^1.0.9",
    "react-native-firebase": "^3.0",
    "react-native-fit-image": "^1.4.8",
    "react-native-flanimatedimage": "^0.4.0",
    "react-native-highlight-words": "^1.0.1",
    "react-native-keep-awake": "^3.0.1",
    "react-native-linear-gradient": "^2.0.0",
    "react-native-modalbox": "^1.6.0",
    "react-native-orientation": "^3.1.3",
    "react-native-parallax-scroll-view": "../react-native-parallax-scroll-view",
    "react-native-rate": "^1.0.8",
    "react-native-safari-view": "^2.0.0",
    "react-native-sentry": "^0.38.0",
    "react-native-sha256": "^1.1.1",
    "react-native-status-bar-size": "^0.3.2",
    "react-native-swiper": "../react-native-swiper",
    "react-native-tooltip": "^5.2.0",
    "react-native-tts": "^1.5.0",
    "react-native-vector-icons": "^4.1.1",
    "react-native-webview-bridge": "../react-native-webview-bridge-RN0.51",
    "react-redux": "^5.0.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "redux-logger": "^3.0.6"
  },
  "resolutions": {
    "@babel/core": "7.0.0-beta.56",
    "babel-core": "7.0.0-bridge.0"
  }
}

[qinkaiabc]

YellowBox.ignoreWarnings(['Require cycle:']);

[fungilation]

@qinkaiabc I'm well aware of that cosmetic workaround.

[MaxInMoon]

@qinkaiabc can you share your .babelrc file if any please?

[zootopia106]

Hello, i also met this warning.
Is there any solution to remove these things?

[Winglonelion]

@qinkaiabc Did you try this ??

[daviscabral]

That's only a warning - you need just to watch out to be sure you are not doing anything wrong there. But that's a yellow flag - if you have a A -> B -> A cycle, maybe worth extracting the shared code from A and B to C where both could make use of that.

[akmalahmed525]

@daviscabral Hi. Is there any workaround found to suppress this warning?

[juhana]

@ahmedakmal525 https://github.com/facebook/react-native/issues/20841#issuecomment-422360627

[chpill]

@fungilation I have 2 require cycle warnings similar to yours, that are caused by sentry-react-native (There is an issue open on their side here: https://github.com/getsentry/react-native-sentry/issues/479).

[shinriyo]

What is cycle?

TCP Conn 0x283a54540 Failed : error 0:61 [61]
2018-10-04 22:33:07.133 [warn][tid:com.facebook.react.JavaScript] Require cycle: node_modules/react-native-vector-icons/lib/create-icon-set.js -> node_modules/react-native-vector-icons/lib/ensure-native-module-available.js -> node_modules/react-native-vector-icons/lib/create-icon-set.js

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

[kelset]

It seems to me that these warnings are triggered by Metro "understanding" how files depends on each other, and that now all the cycles triggered by files inside the main react-native project have been fixed.

There is no reason to keep this issue open, please submit PRs to the libraries that generate those errors and help them reduce these warnings :) It's Hacktoberfest and I think that this kind of PR would be much appreciated!

Again, it's not a blocker nor a real issue, it's just a warning - and @shinriyo the basic explanation of the cycle concept in this scenario is

*---> File A wants something from file B -> file B wants something from file C -> file C wants something from file A ---*

There is a "circle" being created, and thus the warning says this may lead to uninitialized values.

[fungilation]

and that now all the cycles triggered by files inside the main react-native project have been fixed.

Umm, what's the fix? Without knowing, hard to tell/implement PRs for libraries (outside RN) that generate those errors.

[kelset]

Without knowing, hard to tell/implement PRs for libraries (outside RN)

Not sure I follow, the warning details the cycle path, so it's easy to understand which files are causing Metro to detect a circle.

Example:
Require cycle: node_modules/react-native-vector-icons/lib/create-icon-set.js -> node_modules/react-native-vector-icons/lib/ensure-native-module-available.js ->
(extracted from above)

[brentvatne]

I think this warning should be muted for node_modules unless the user opts-in. In most cases people can't do anything about the warnings and so it just adds irritating noise.

[brentvatne]

I made an issue on metro about this: https://github.com/facebook/metro/issues/287