React-native-maps: Got warning: "Require cycle" in MapView

[l1fe]

Bug

Got require cycle warning with the 0.27.1 version of the library:

Warning: Require cycle: node_modules/react-native-maps/lib/components/MapView.js -> node_modules/react-native-maps/lib/components/Geojson.js -> node_modules/react-native-maps/lib/components/MapView.js

Environment info

System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 44.52 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.10.0 - ~/.nvm/versions/node/v12.10.0/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.10.3 - ~/.nvm/versions/node/v12.10.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.1
      System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5
  npmGlobalPackages:
    react-native-create-library: 3.1.2

Library version: 0.27.1

Steps To Reproduce

1. Install react-native-maps
2. Mount <MapView />
   ...

Describe what you expected to happen:

1. No warnings

Reproducible sample code

Plain

[vishweshjoshi]

Hi All,

I am also getting same issue after adding mapview. Any solution or workaround for this?

[thuyngocha98]

same problem :(

[rborn]

This is warning, not harmful (yet)
It needs some refactoring to remove it but is JS side only so any PR is gladly accepted 😀

[joaovitorzv]

same problem here

[itsam]

I second that!
Any solutions are highly appreciated. Thank you.

[siloob]

Hi, same problem here

With this one at the same time :
Require cycle: node_modules/react-native-maps/lib/components/MapView.js -> node_modules/react-native-maps/lib/components/MapPolygon.js -> node_modules/react-native-maps/lib/components/MapView.js

[DalerAsrorov]

Just saw the same issue after adding the MapView component to the app.

[EdilsonAndrade]

Same issue here :-(

[rdourado92]

Same problem here :P

[gride-nepal]

Same issue here

Require cycle: node_modules/react-native-maps/lib/components/MapView.js -> node_modules/react-native-maps/lib/components/MapPolygon.js -> node_modules/react-native-maps/lib/components/MapView.js

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

[nurmohammed840]

How to rid of those warn?

[nethusan]

Got the same problem, any updates?

[nick-bull]

This has caused my map to stop rendering - it is more than just a warning!

[alihasana]

Got the same problem in andriod as well, any updates please?

[JamesKemp296]

Also having the same issue in my app.

[rborn]

Any PR is welcome 😉

[diegomart2000]

hey @rborn I do have a branch locally with a simple refactor to fix this. It is pretty straight forward. I can't push it tho.

[myty]

@diegomart2000 We must be thinking along the same lines. I just pushed up a PR. Want to take a look and compare? #3424

[diegomart2000]

@myty 100% the same exact thing.

[rborn]

@myty @diegomart2000 😻

[xDemon200]

fix solucion by @myty with forked
yarn add https://github.com/xDemon200/react-native-maps
npx react-native start
npx react-native run-android

[itsam]

Works smoothly :) Thanks a lot all of you for your effort

[NSNJRGL]

Same problem here :)

[syngi]

Could a new version be released? 0.27.1 is the latest, but had the issue. Thanks!

[tinim123]

Same problem, help please

[myty]

Same problem, help please

@syngi @tinim123 @NSNJRGL The easiest thing you can do until a new version is released is to do:
yarn add git+https://github.com/react-native-community/react-native-maps.git in your RN project.

[NSNJRGL]

yeap it's working

[itsam]

What I do to apply patches prior to release (in general) is to use https://www.npmjs.com/package/patch-package
I believe is the most clean solution and works perfectly.

[pke]

What I do to apply patches prior to release (in general) is to use npmjs.com/package/patch-package
I believe is the most clean solution and works perfectly.

How would that work with that PR here now? Thanks.

[itsam]

@pke
1) install patch-package.
2) create a folder in your project called "patches"
3) Inside "patches" folder get the patch from this gist (for convenience) https://gist.github.com/itsam/278a56a1f20a8b80e27c269d9fe83093
and name it as react-native-maps+0.27.1.patch
4) yarn install or npm install

Hope that helps

[pke]

@itsam This is genius! I will use it for all sorts of un-published patches now, thanks! 🚀

Important is to actually add the "postinstall" script with a patch-package call

[tranvanquang]

I have same proplem :(( can u have solution for this warning?

[NSNJRGL]

yarn add https://github.com/xDemon200/react-native-maps
npx react-native start
npx react-native run-android

It is working btw

[MarcoFromBerlin]

@itsam This is genius! I will use it for all sorts of un-published patches now, thanks! 🚀

Important is to actually add the "postinstall" script with a patch-package call

Hi!
Can you explain what did you do?
Thanks!

[pke]

@MarcoFromBerlin I did what @itsam wrote step by step.

[MarcoFromBerlin]

ok. thanks.
actually now I don't get it anymore

[rodrigoincsoft]

Pessoal
Para mim *RESOLVIDO da seguinte forma:*
Entrar na pasta do componente em ....\node_modules\react-native-maps\lib\components
Fazer as seguintes alterações

diff --git a/node_modules/react-native-maps/lib/components/Geojson.js b/node_modules/react-native-maps/lib/components/Geojson.js

Observe que ao lado da linha tem o sinal de menos(-) e mais(+) que indica o que deve ser substituído.

-import MapView from './MapView'; <====Restirar esta linha
+import Marker from './MapMarker'; < ==== Acrescentar esta linha
+import Polyline from './MapPolyline'; < ==== Acrescentar esta linha
+import Polygon from './MapPolygon'; < ==== Acrescentar esta linha

     if (overlay.type === 'point') {
       return (

- *trocar isto
+ key={index}

     if (overlay.type === 'polygon') {
       return (

- + key={index}

     if (overlay.type === 'polyline') {
       return (

- trocar isto
+ por apenas isto
key={index}
coordinates={overlay.coordinates}

///Neste outro componente
....modules/react-native-maps/lib/components/MapPolygon.js

USES_DEFAULT_IMPLEMENTATION,
SUPPORTED,
} from './decorateMapComponent';
-import MapView from './MapView';
+import * as ProviderConstants from './ProviderConstants';

     onLayout={

- this.context.provider === MapView.PROVIDER_GOOGLE < ====trocar Isto
+ this.context.provider === ProviderConstants.PROVIDER_GOOGLE <===Por isto
? this.updateNativeProps()
: undefined
}

[ramafebri]

@pke

1. install patch-package.
2. create a folder in your project called "patches"
3. Inside "patches" folder get the patch from this gist (for convenience) https://gist.github.com/itsam/278a56a1f20a8b80e27c269d9fe83093
   and name it as react-native-maps+0.27.1.patch
4. yarn install or npm install

Hope that helps

i have tried npx patch-package https://gist.github.com/itsam/278a56a1f20a8b80e27c269d9fe83093 and
the result is "No such package https://gist.github.com/itsam/278a56a1f20a8b80e27c269d9fe83093"

How to get that patch correctly?

[FaycalBorsali]

@pke

1. install patch-package.
2. create a folder in your project called "patches"
3. Inside "patches" folder get the patch from this gist (for convenience) https://gist.github.com/itsam/278a56a1f20a8b80e27c269d9fe83093
   and name it as react-native-maps+0.27.1.patch
4. yarn install or npm install

Hope that helps

I followed this step by step but I keep getting the warning !

• For the first step, I did yarn add patch-package postinstall-postinstall (see The package documentation)
• The second and third step are straightforward ! (I copy/pasted the raw code from the gist)
• The fourth step (I did yarn install ) , I only get success Already up-to-date.

What I also tried :

• Installing patch-package and postinstall-postinstall both locally and globally !
• Re-run npx react-native start followed by npx react-native run-android

None of the above solved removed the warning ! What should I try ?

[frankitox]

Alright, I just wasted a couple of hours with this goddamn warning. I didn't want to patch react-native-maps because I'll probably encounter this warning in other libraries, so I wanted a solution that works with all libraries. I first tried using YellowBox/ignoreWarnings to no avail (don't know why).

If still interested @FaycalBorsali, I ended up using what this comment suggests, which is an updated answer to this previous comment. The solution is really brittle because it matches a regexp on the metro source code, so what regexp you use depends on the metro version you currently have. Other way to go it's just editing the source code yourself, as this guy did. But then you gotta be careful, if you ever update the metro dependency and run npm install you'll have to edit the source code again.

[hathuy98]

do have someone resolve problem yet ?

[RG-404]

I am still having problem with this. Map is not being rendered. I tried installing directly with GitHub. But that too have bugs. Now its even worse.
There are two cycles now:

• MapView.js -> Geojson.js -> MapView.js
• MapView.js -> MapPolygon.js -> MapView.js

[diwakarpawar]

@FaycalBorsali

Don't forget to add "patch-package" in postinstall in package.json before doing yarn install.
In package.json

"scripts": {
"postinstall": "patch-package"
}

[omer-to]

I just got the same warning, and my app is not opening anymore. Any official solution?

[sjuanati]

Even after applying the patch, it doesn't work. No warning now, but when I try to show the map, the app is suddenly closed.
Anyone still supporting this package? after all these months without solution, it doesn't look like something to have in Production.

[pke]

@sjuanati the patch works fine. Make sure you have the Google Map SDK ID set in your AppDelegate if you want to use the google map provider. If its not set, the app just crashes.

[kidfrom]

I have the same problem. I am not sure whether I did something wrong, is the v0.27.1 broken or am I using it wrong?

This is a component for Stack.Screen

import React from 'react';
import MapView from 'react-native-maps';

export default function Screen() {
  return (
    <MapView
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
  );
}

[kuasha420]

I wonder how hard it is to push a new npm package...