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

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. screenshot 2018-08-24 21 34 32

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"
  }
}

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 48
Comments: 15

Most upvoted comments

YellowBox.ignoreWarnings([‘Require cycle:’]);

+33

qinkaiabc on Sep 18, 2018

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 on Oct 9, 2018

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)

kelset on Oct 5, 2018

@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).

chpill on Sep 24, 2018

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.

daviscabral on Sep 23, 2018