Maps: Fresh Install Failing on iOS

[keithgulbro]

Describe the bug
Created new react-native project and immediately after creating the project, attempted to install react-native-mapbox-gl version 7.0.7.

Navigated to the iOS folder of the project and ran pod install everything was installed successfully

Run react-native run-ios and get the following error:

Error: Requiring module "node_modules/@react-native-mapbox-gl/maps/javascript/index.js", which threw an exception: TypeError: null is not an object (evaluating 'MapboxGL.StyleURL')

loadModuleImplementation
    require.js:269:27
<global>
    App.js:27
loadModuleImplementation
    require.js:322:6
guardedLoadModule
    require.js:201:45
runUpdatedModule
    require.js:657:17
metroHotUpdateModule
    require.js:533:8
define
    require.js:53:24
global code
    App.bundle?platform=ios&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:1:4
<unknown>
    [native code]:0
inject
    injectUpdate.js:62:35
forEach
    [native code]:0
injectUpdate
    injectUpdate.js:71:26
on$argument_1
    HMRClient.js:40:21
emit
    index.js:202:37
_ws.onmessage
    WebSocketHMRClient.js:72:20
EventTarget.prototype.dispatchEvent
    event-target-shim.js:818:39
_eventEmitter.addListener$argument_1
    WebSocket.js:232:27
emit
    EventEmitter.js:190:12
callFunctionReturnFlushedQueue
    [native code]:0

Package.json
```{
"name": "mapboxReactNative",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-native-mapbox-gl/maps": "^7.0.7",
"react": "16.9.0",
"react-native": "0.61.2"
},
"devDependencies": {
"@babel/core": "^7.6.3",
"@babel/runtime": "^7.6.3",
"@react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}

The only code I've added to my App.js file pertaining to this package thus far has been the following:

import MapboxGL from '@react-native-mapbox-gl/maps';

MapboxGL.setAccessToken('');
```

To Reproduce
Steps to reproduce the behavior

• Create new react-native project
• Attempt to install react-native-mapbox-gl
• cd into ios & run pod install (should be successful)
• Add import MapboxGL from '@react-native-mapbox-gl/maps'; to default App.js file
• Try to run react-native run-ios

Review the errors outlined above

Expected behavior
Mapbox should load without errors

Screenshots

Versions (please complete the following information):

• Platfrom: iOS
• Device: All iOS devices
• OS: N/A
• SDK Version react-native-mapbox-gl: 7.0.7
• React Native Version 0.61.2

Additional context
Any insight would be greatly appreciated :)

[mfazekas]

Does mapbox added to Podfile? Also how you added react-native-mapbox-gl exactly?

[keithgulbro]

@mfazekas Why did you close this issue? It's a valid problem!

Steps to reproduce:

1.) Create new React Native Project: react-native init mapboxSampleProject
2.) cd mapboxSampleProject
3.) Run in terminal: npm install @react-native-mapbox-gl/maps --save
4.) Run: react-native link @react-native-mapbox-gl/maps
5.) Run: react-native run-ios (Default React Native App Loads Successfully)
5.) Open App.js and add: import MapboxGL from "@react-native-mapbox-gl/maps";
6.) Refresh the application & notice the error's listed above.

Please advise.

[keithgulbro]

@kristfal Would you happen to have any insight? I followed the iOS installation documentation without success.

Since I'm using React-Native 0.61.2 according to the documentation I should just have to run: react-native link @react-native-mapbox-gl/maps and then should be good but that doesn't seem to be the case. Perhaps we could update the documentation?

[mfazekas]

react-native run-ios

@mfazekas Why did you close this issue? It's a valid problem!

Steps to reproduce:

1.) Create new React Native Project: react-native init mapboxSampleProject
2.) cd mapboxSampleProject
3.) Run in terminal: npm install @react-native-mapbox-gl/maps --save
4.) Run: react-native link @react-native-mapbox-gl/maps
5.) Run: react-native run-ios (Default React Native App Loads Successfully)
5.) Open App.js and add: import MapboxGL from "@react-native-mapbox-gl/maps";
6.) Refresh the application & notice the error's listed above.

Please advise.

Make sure that there is Compiling RCTMGLMapView.m etc when run-ios builds the project.
After react-native link @react-native-mapbox-gl/maps i did a cd ios; pod install and following that react-native run-ios did compiled mapbox.

There is also a warning during the build:

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - @react-native-mapbox-gl/maps (to unlink run: "react-native unlink @react-native-mapbox-gl/maps")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md

Have you tried the the above steps without react-native link ?? Not sure if mapbox is autolink compatible yet.

[kristfal]

FYI autolinking should work for both iOS and Android. I haven’t tried
myself, but got multiple reports of it.

On Wed, 9 Oct 2019 at 18:51, Miklós Fazekas [e-mail]
wrote:

react-native run-ios

@mfazekas https://github.com/mfazekas Why did you close this issue?
It's a valid problem!

Steps to reproduce:

1.) Create new React Native Project: react-native init mapboxSampleProject
2.) cd mapboxSampleProject
3.) Run in terminal: npm install @react-native-mapbox-gl/maps --save
4.) Run: react-native link @react-native-mapbox-gl/maps
5.) Run: react-native run-ios (Default React Native App Loads
Successfully)
5.) Open App.js and add: import MapboxGL from
"@react-native-mapbox-gl/maps";
6.) Refresh the application & notice the error's listed above.

Please advise.

Make sure that there is Compiling RCTMGLMapView.m etc when run-ios builds
the project.
After react-native link @react-native-mapbox-gl/maps i did a cd ios; pod
install and following that react-native run-ios did compiled mapbox.

There is also a warning during the build:

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:

• @react-native-mapbox-gl/maps (to unlink run: "react-native unlink @react-native-mapbox-gl/maps")
  This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink " and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
  Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md

Have you tried the the above steps without react-native link ?? Not sure
if mapbox is autolink compatible yet.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/react-native-mapbox-gl/maps/issues/458?email_source=notifications&email_token=ABLAPW2ODWUQENOX2CBHHZDQNYDXLA5CNFSM4I6Z36WKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAYRTIQ#issuecomment-540088738,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABLAPW365EYOW64QBLV5BXTQNYDXLANCNFSM4I6Z36WA
.

[otaviosoares]

I don't know if it's related, but to add to the issue I'm also facing problems with a fresh install of RN.

• Created a new app with react-native init
• Installed latest version of @react-native-mapbox-gl/maps
• Ran pod install
• Trying to build with react-native run-ios got:

/Users/otaviosoares/Projects/testapp/node_modules/@react-native-mapbox-gl/maps/ios/RCTMGL/MGLCustomHeaders.m:10:9: fatal error: 'MapBox/MGLNetworkConfiguration.h' file not found
#import <MapBox/MGLNetworkConfiguration.h>
        ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 error generated.

** BUILD FAILED **

The following build commands failed:
    CompileC /Users/otaviosoares/Projects/testapp/ios/build/testapp/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/react-native-mapbox-gl.build/Objects-normal/x86_64/MGLCustomHeaders.o /Users/otaviosoares/Projects/testapp/node_modules/@react-native-mapbox-gl/maps/ios/RCTMGL/MGLCustomHeaders.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

_Package.json_

{
  "name": "testapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-mapbox-gl/maps": "7.0.7",
    "react": "16.9.0",
    "react-native": "0.61.2"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

UPDATE: If I downgrade @react-native-mapbox-gl/maps to 7.0.0 it builds, but I get other runtime errors.

[keithgulbro]

@otaviosoares I resolved my issue this morning so I figure I'll post it here in case anyone like yourself may encounter a similar circumstance.

Steps that produced a successful outcome for me:
1.) react native init sampleReactNativeProject
2.) cd sampleReactNativeProject
3.) yarn add @react-native-mapbox-gl/maps (Use NPM if you prefer)
4.) react-native link @react-native-mapbox-gl/maps
5.) cd ios
6.) pod install
7.) cd ../ (Back to the react native project root)
8.) react-native run-ios
9.) Inside the App.js file add:

// Mapbox
import MapboxGL from '@react-native-mapbox-gl/maps';

MapboxGL.setAccessToken('YOUR_MAPBOX_ACCESS_TOKEN);

Should still compile successfully. Please let me know if you encounter any issues and also please reference my package.json file noted in the initial issue comment for details.

@kristfal thanks for the reply & sorry to bother!

[otaviosoares]

@keithgulbro repeated the steps u provided and got the same error. May I ask your xcode version?

[mfazekas]

@otaviosoares your npm run fetch:ios:sdk that downloads Mapbox.framework is likely failed. Try to remove the rnmpgl from node_modules and reinstall.

I'm closing this issue as npm link should be used with pod install. FWIW RNMPGL should also work with autolink without npm link too.

[alexxsanchezm]

What should I do If I have case sensitive environment?? Format my machine again?

[kristfal]

Hey Alex. This is an open source project driven by volunteers on our spare time. If you experience an error that most of the community doesn’t, you are more than welcome to open a PR to fix the issue.

As for this problem in particular with case sensitivity, try installing from master, as that has a at least one fix for case sensitive systems which has not made its way to NPM yet.

[alexxsanchezm]

@kristfal Yes, I'm open to help.
And also to confirm master branch did overcome the case sensitive issue. Thank you!.

[keithgulbro]

Does anyone have an update on this? I grew frustrated with the lack of support for a fresh install & took a break from trying react-native mapbox-gl but it seems this issue is still prevalent with a fresh install of iOS.

Steps to reproduce:

Create fresh react native project.

Run the following in the terminal: npm install @react-native-mapbox-gl/maps --save

No errors or vulnerabilities were found during install

package.json

{
  "name": "PROJECTNAME",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-mapbox-gl/maps": "^8.0.0-rc2",
    "react": "16.11.0",
    "react-native": "0.62.1"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Then I when re-running the application I get the same error screen shown in my initial issue on this thread outlining that MapboxGL.StyleUrl is null

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';

MapboxGL.setAccessToken(
  '{TOKEN},
);

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  container: {
    height: 300,
    width: 300,
    backgroundColor: 'tomato',
  },
  map: {
    flex: 1,
  },
});

export default class App extends Component {
  componentDidMount() {
    MapboxGL.setTelemetryEnabled(false);
  }

  render() {
    return (
      <View style={styles.page}>
        <View style={styles.container}>
          <MapboxGL.MapView style={styles.map} />
        </View>
      </View>
    );
  }
}

Can we please get this resolved? It's kind of ridiculous that a fresh install of react-native with this plugin completely fails on iOS...

[mfazekas]

@keithgulbro

Can we please get this resolved? It's kind of ridiculous that a fresh install of react-native with this plugin completely fails on iOS...

Please follow the ios installation steps.

[mfazekas]

@keithgulbro in particular this runs for me just fine:

react-native init rnmbgltest --version 0.61.5
cd rnmbgltest
npm install @react-native-mapbox-gl/maps --save

cd ios 
edit Podfile
# add 'use_frameworks!'
pod install ; cd ..
edit App.js
# import MapboxGL from '@react-native-mapbox-gl/maps';
# MapboxGL.setAccessToken('<ACCESS_TOKEN>');
# ...
react-native start
react-native run-ios

[keithgulbro]

@mfazekas Thanks for the response! The instructions you described do work for me however, I wonder why the latest version of ReactNative causes the same instructions to fail. 0.61.5 seems to work fine though.

  "dependencies": {
    "@react-native-mapbox-gl/maps": "^8.0.0-rc2",
    "react": "16.11.0",
    "react-native": "0.62.1"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.11.0"
  },

Additionally, I noticed that flipper has been added to ReactNative 0.62.X by default & notes in the PodFile that flipper should be disabled if you use use_frameworks!.

Just want to call this out as I'm sure there are many ReactNative developers who may encounter a similar situation. 🙂

[mfazekas]

@keithgulbro our docs should have isntructions for workaround without use_frameworks! that works with 0.62.1 too.

react-native init rnmbgltest --version 0.62.1
cd rnmbgltest
npm install @react-native-mapbox-gl/maps --save

cd ios 
edit Podfile
# add pod 'NoUseFrameworks-MapboxMobileEvents',  :podspec => '../node_modules/@react-native-mapbox-gl/maps/ios/NoUseFrameworks-MapboxMobileEvents/NoUseFrameworks-MapboxMobileEvents.podspec.json'
pod install ; cd ..
edit App.js
# import MapboxGL from '@react-native-mapbox-gl/maps';
# MapboxGL.setAccessToken('<ACCESS_TOKEN>');
# ...
react-native start
react-native run-ios