React-native-maps: Requiring unknown module "undefined".

Created on 2 Mar 2018  ·  52Comments  ·  Source: react-native-maps/react-native-maps

Is this a bug report?

Yes

Have you read the Installation Instructions?

Yes, repeated the steps 3 times with different projects. Same result.

Environment

react-native: 0.54
react: 16.3.0-alpha.1 react-native-maps: 0.20.1

Actual Behavior

The MapView import doesn't recognize "react-native-maps" as a module.
Screenshot

Most helpful comment

Solved the issue by changing dependencies in package.json manually:
Was:

"dependencies": {
    "react": "16.3.0-alpha.1",
    "react-native": "0.54.0",
    "react-native-maps": "0.20.1"
  },

Changed to

"dependencies": {
    "react": "16.0.0",
    "react-native": "0.51.0",
    "react-native-maps": "0.20.1"
  },

Then ran npm install.

All 52 comments

Solved the issue by changing dependencies in package.json manually:
Was:

"dependencies": {
    "react": "16.3.0-alpha.1",
    "react-native": "0.54.0",
    "react-native-maps": "0.20.1"
  },

Changed to

"dependencies": {
    "react": "16.0.0",
    "react-native": "0.51.0",
    "react-native-maps": "0.20.1"
  },

Then ran npm install.

I have same issue.
I changed react-native to 0.54.0-rc.3, and then it works.
this commit may cause this problem.

https://github.com/react-community/react-native-maps/blob/master/index.js#L12
those module cannot be imported.

Your fix worked for me.

To all, just make sure the package.json specifies "react-native": "0.54.0-rc.3" stricly (without the ^)

EDIT: the install only works with yarn

I got the same error, upgrading to 0.54.0-rc.3 worked.

I sent PR to solve this and it was merged.
https://github.com/react-community/react-native-maps/pull/2053
this PR enables to import modules in [email protected]

npm uninstall react-native-maps
npm install --save [email protected]

@altissave1 The aim of this issue is to make [email protected] compatible with [email protected]
Only waiting for the release here.

waiting for release too

@Tamiyadd try to install the master from git and let us know if it works

@rborn it works!

@AzarouAmine I used the given steps but same error every time.
If it is possible please send the steps to solve.

"dependencies": {
"react": "16.3.0-alpha.1",
"react-native": "0.54.0",
"react-native-maps": "0.20.1"
},
Changed to

"dependencies": {
"react": "16.0.0",
"react-native": "0.51.0",
"react-native-maps": "0.20.1"
},

after this I run the npm install

then react-native run-ios
simulator screen shot - iphone 6 - 2018-03-08 at 17 04 12

I'm facing the same issue for past few days as @jamesDZ . It would be really helpful if someone can provide insight on what could be happening on either react native or react native maps side.

@jamesDZ @rishabhmathur1693 The only fix for the moment is this

Make sure of this point too

Now you can only wait for the next release like everyone

@VinceBT Thanks for your response, but I didn't helped me much.

After changing react-native to 0.54.0-rc.3, NPM gave me this error -

screen shot 2018-03-08 at 9 19 12 pm

Then, I looked up for this issue and I found its resolution on this link -

https://github.com/facebook/react-native/issues/18010

After changing react-native version to 0.54.0-rc.4, my package.json looks like this -

{ "name": "GoogleMapDemo", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "^16.3.0-alpha.1", "react-native": "0.54.0-rc.3", "react-native-maps": "^0.20.1" }, "devDependencies": { "babel-jest": "22.4.1", "babel-preset-react-native": "4.0.0", "jest": "22.4.2", "react-test-renderer": "^16.3.0-alpha.1" }, "jest": { "preset": "react-native" } }

Then, I executed the command npm install and it completed successfully. After that I stopped the react-native start command and restarted it with clear cache option.

When the service is started, I ran react-native run-ios & it again gave me the same error like before -

screen shot 2018-03-08 at 9 23 35 pm

Please point out if I had done something wrong or should've done something else.

@rishabhmathur1693 use

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

FYI: I wrote the document to solve this issue until it will be released.
I recommend to use patch-package in the aspect of maintainability.
https://gist.github.com/hrl7/916ce48ba3e2d62dcaee9540f304a504#file-use-rn-maps0-20-1-in-rn0-54-0-md

@rishabhmathur1693 You wont have the babylon error if you install it with yarn

I faced this issue too and this is my experience and eventual temp solution.

Before i start, i would like to point out that before I even reached this error of 'unknown module "undefined"', i was following the documentation and realized i need to need to comment out "BatchedBridge" from the Podfile to do pod install.

After pod install and following further into the document, i encounter 'unknown module "undefined"' when trying to run it on IOS. So following the suggested solution on this page, i encountered the following:

  1. When i try to use "react-native": "0.54.0-rc.3" and npm install, i encounter the issue of "EUNSUPPORTED ISSUE protocol". The way to fix this is to use yarn to install. But after that i still faces issue with 'unknown module "undefined"'.

2 Using "react-native": "0.54.0-rc.4" can overcome the "EUNSUPPORTED ISSUE protocol" but still result in 'unknown module "undefined"'.

  1. Using master branch of react-native-maps by "react-native-maps": "https://github.com/react-community/react-native-maps.git" seems to not throw error. But for some reason i keep getting the react-native error of 'DeltaPatcher should receive a fresh Delta when being initialized'. I think this error is a bug from react-native. But before using master branch of react-native-maps, i was able to avoid this error 50% of the time when i refresh my app. But after using master branch, this error appears 100%.

So the temporarily fix for me is to use version "react-native": "^0.52.3". Specifically i did the following:
npm uninstall react-native
npm install [email protected]
pod install (in ios folder. Also don't have to comment out BatchedBridge)
reopen xcode (and product clean. Not sure if this is neccessary)
run on IOS and the map should work.

@sydneywu Thanks for your solution. I did everything that you mentioned, but still I got this error while building -
screen shot 2018-03-09 at 12 28 18 pm

So, I added DevSupport in pod file and ran pod install

After doing all that my package. json looks like this -

{ "name": "GoogleMapDemo", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "^16.3.0-alpha.1", "react-native": "^0.52.3", "react-native-maps": "https://github.com/react-community/react-native-maps.git" }, "devDependencies": { "babel-jest": "22.4.1", "babel-preset-react-native": "4.0.0", "jest": "22.4.2", "react-test-renderer": "^16.3.0-alpha.1" }, "jest": { "preset": "react-native" } }

I ran react-native run-ios and this time it build successfully. Only one thing, Map was not getting displayed in the app. It's just a white screen

screen shot 2018-03-09 at 12 45 19 pm

I looked up a solution and added style to MapView -

mapStyle: { top: 0, bottom: 0, left: 0, right: 0 },

Still nothing. Could it be due to the reduced version of react that we are using?

@rishabhmathur1693 @sydneywu As said in https://github.com/react-community/react-native-maps/issues/2051#issuecomment-371578887 you wont have the unsupported protocol error if you install 0.54.0-rc.3 with yarn. Stop trying black magic tricks, try it and tell us if it works.

npm i -g yarn
yarn add [email protected]

@VinceBT @sydneywu
Using yarn resolved the issue for installing react-native 0.54.0-rc.3. Google Map is finally displayed on screen.

screen shot 2018-03-09 at 4 26 07 pm

Thanks everyone for all the assistance.

@christopherdro Could there be a release after this PR ?

Thanks @VinceBT @sydneywu and @rishabhmathur1693 with your effort issue resolved.

"Work-around" to use master results in iOS * BUILD FAILED *.

Stuck at 0.53 :-(

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

* BUILD FAILED *
````
The following commands produced analyzer issues:
Analyze Base/RCTModuleMethod.mm
Analyze Modules/RCTUIManager.m
(2 commands with analyzer issues)

The following build commands failed:
CompileC /react-native/my-app/source/ios/build/Build/Intermediates.noindex/
AirMaps.build/Debug-iphonesimulator/AirMaps.build/Objects-normal/x86_64/
AIRGoogleMapPolygonManager.o AirGoogleMaps/AIRGoogleMapPolygonManager.m
normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
````

@VinceBT I tried yarn add [email protected]. I am still getting the same 'unknown module "undefined" error'. For those of you who did it. May i asked whether you:

1) comment out "BatchedBridge" in podFile
2) run pod update yoga
3) run pod update React/Core

Yet another silent metro side effect.

Requiring unknown module "undefined" #152

The problem is happening when there are 2 requires to the same file but with different forms in the same module, for example:
const a = require('./a'); const a1 = require('./a.js'); This is what happened to react-native-maps (although they've just fixed it in react-community/react-native-maps@0e201a9).

This is what happened to react-native-maps (although they've just fixed it in react-community/react-native-maps@0e201a9).

I just set this in the package.json:

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

Now it works.

i upgrade RN to 0.54.2 for this bug

18359

(clear textinput make app crash in real android device)
and now :|

i fixed this issue with react-native-maps

"dependencies": {
    "native-base": "^2.3.10",
    "react": "^16.3.0-alpha.1",
    "react-native": "0.54.2",
    "react-native-maps": "^0.20.1"
  },

if you have still problem with this you can use @maikenmadsen92 way
just npm uninstall react-native-maps && npm install react-native-maps && react-native link
just change package.json to "react-native-maps": "https://github.com/react-community/react-native-maps.git"
in react-native-maps manual i used

compile 'com.google.android.gms:play-services-base:+'
compile 'com.google.android.gms:play-services-location:+'
compile 'com.google.android.gms:play-services-maps:+'

hope this help you

can we plan a new release?

@hrl7 @rborn can we please have a new release?

@hrl7 's solution works for our project too.
When are you guys going to release the new build which changes?
Really appreciate it.

hi, i get red error undifined, this is my configuration:
"dependencies": {
"react": "^16.3.0-alpha.1",
"react-native": "0.54.2",
"react-native-maps": "^0.20.1"
}
i get the error in ios simulator and real device.
I've install with pod.
https://github.com/react-community/react-native-maps/blob/master/docs/installation.md
please help :)

@xxstefanoxx change "react-native-maps": "^0.20.1" to "react-native-maps": "https://github.com/react-community/react-native-maps.git" until they release a new version.

@wbattel4607 I have to give back the command npm install?

@xxstefanoxx after changing the version in package.json you will need to re-install the package with the command npm install

@wbattel4607 thanks!!! now works with emulatore but xcode give this error:
'GMUKMLParser.h' file not found AIRGoogleMap.m

@xxstefanoxx see proposed solutions in this issue https://github.com/react-community/react-native-maps/issues/2066

This is still holding us up. We've tried using the fix on master but #2066 is preventing us from doing so. @rborn @hrl7 when will a new version be released? There are a ton of changes on master but the last version was released 40 days ago.

We're stuck into a corner right now. React Native 0.53 has a debugging issue that prevents us from using it and we can't get react-native-maps working on 0.54 at all.

@wbattel4607 I don't control the releases sadly :(
@christopherdro does but I think he's overloaded atm as he's not responding.

Hey there. Right now I am pretty backed up with work so what is mainly limiting me from doing a release is putting the release notes together.

If someone from the community can create the release commit as a PR I'll be more than happy to merge and do a release. Here is a reference commit to what needs to be changed for a new release.

https://github.com/react-community/react-native-maps/commit/0d376464a3b75edb8004cce0cfc9285fcd4a0816

It is written in the comments above already, but because there is so much activity here it may get lost. Until the new release is out this solves the issue

package.json
"react-native": "0.54.0-rc.3" -> stricly (without the ^)

The install only works with yarn, not with npm

The master version works fine (for me). Whats holding back a new release?

@jerolimov this: https://github.com/react-community/react-native-maps/issues/2051#issuecomment-376191505 I don't have enough time to do it these days but we can accept a PR 🤪

I guess I'll make a PR then... ¯\_(ツ)_/¯

Edit: done! See here.

So there was an update for react, react-native and react-native-maps, the configuration that is currently working for me is:

package.json {
    "dependencies": {
        "react": "16.3.0",
        "react-native": "0.55.0",
        "react-native-maps": "^0.21.0"
  }
}

Also I added additional things to make project work

_your-project/android/build.gradle_

buildscript {
    repositories {
        jcenter()
        google() // add this
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.0' // change gradle to this version

    }
}

I used the old way of implementation (not the recommended project-wide properties)

_your-project/android/app/build.gradle_

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile project(':react-native-maps')
    compile(project(':react-native-maps')){
        exclude group: 'com.google.android.gms', module: 'play-services-base'
        exclude group: 'com.google.android.gms', module: 'play-services-maps'
    }
    compile 'com.google.android.gms:play-services-base:11.0.1' // these both to version 11.0.1
    compile 'com.google.android.gms:play-services-maps:11.0.1'
}

and the last thing I changed is

_your-project/android/gradle/wrapper/gradle-wrapper.properties_

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip // update to this version

Hope this helps, cheers! 👍

@Arshiamidos thanks bro, now works 💃

@herarya ur welcome bro🤗.

the error is fixed, but after that this ih just showing a white blank screen , somebody know how to fix it ?

the error is fixed, but after that this ih just showing a white blank screen , somebody know how to fix it ?

@mcandrak you have to give style to map.. give it absolute position of top, bottom, left and right to 0

I got the same error ,but finally I fix it by changed a path of a required image
I hope this can help some one else

Was this page helpful?
0 / 5 - 0 ratings

Related issues

thiagoterleski picture thiagoterleski  ·  55Comments

Starl0rd77 picture Starl0rd77  ·  67Comments

rborn picture rborn  ·  72Comments

rborn picture rborn  ·  75Comments

alioguzhan picture alioguzhan  ·  46Comments