how to solve module become undefined bug in react-native@0.54.0 and react-native-maps@0.20.1

react-native-maps+0.20.1.patch

patch-package
--- a/node_modules/react-native-maps/index.js
+++ b/node_modules/react-native-maps/index.js
@@ -1,4 +1,4 @@
-import MapView from './lib/components/MapView';
+import  MapView  from './lib/components/MapView';
 
 export { default as Marker } from './lib/components/MapMarker.js';
 export { default as Polyline } from './lib/components/MapPolyline.js';
@@ -9,7 +9,9 @@ export { default as LocalTile } from './lib/components/MapLocalTile.js';
 export { default as Overlay } from './lib/components/MapOverlay.js';
 export { default as Callout } from './lib/components/MapCallout.js';
 export { default as AnimatedRegion } from './lib/components/AnimatedRegion.js';
-export { Animated, ProviderPropType, MAP_TYPES } from './lib/components/MapView.js';
+export const Animated = MapView.Animated;
+export const ProviderPropType = MapView.ProviderPropType;
+export const MAP_TYPES = MapView.MAP_TYPES;
 export const PROVIDER_GOOGLE = MapView.PROVIDER_GOOGLE;
 export const PROVIDER_DEFAULT = MapView.PROVIDER_DEFAULT;
 

use-rn-maps0.20.1-in-rn0.54.0.md

intro

I want to solve this issue react-native-maps/react-native-maps#2051 this issue happen after react-native@0.53-rc.4 and 0.54. Finally I could fix this issue but my commit has not released yet. so I'll note down the ways to use it that has not released.

the ways to solve this issue

I know 3 ways. if you know other way, please put comment.

1. specifying git repos in package.json
2. using patch e.g. patch-package. and apply patch with postinstall script.
3. using scoped-package

1. specifying git repos in package.json

official documentation is great. so you can read and understand this.

"react-native-maps": "https://github.com/react-community/react-native-maps.git",

see also react-native-maps/react-native-maps#2051 (comment)

2. using patch

Just use /usr/bin/patch. this is old way but some web engineer may not familiar. and this way may confuse windows user. In node.js, it's easy to use patch-package.

1. yarn add -D patch-package
2. add "prepare": "patch-package" to scripts in package.json
3. mkdir patches on your project root and put react-native-maps+0.20.1.patch into patches
4. yarn

I like this patch-package way since npm will give me warning when target pacakge get new release. first way won't notify that.

3. using scoped package

clone git repo and publish it under your scope. For my case, I can make @zigen/react-native-maps and $ npm install @zigen/react-native-maps (my github username is hrl7 but npm username is zigen). However this way need to change import statement like import MapView from '@zigen/react-native-maps';. so I made package to solve this problem. https://www.npmjs.com/package/unscope-package if you published your scoped react-native-maps, you can unscope it by using this "unscope": ["@yourname/react-native-maps"]

why does this issue happen?

I have no confidence, I suspect require-polyfill in metro. My commit changes just the order of importing module. Once MapView imported, the bundler may not load module from same file in paticular situation. I tried to figure out this bug, but it won't happen... so now I confused...