Can't find variable: MapboxGL

[MaryamTaeb]

Hi, I have been struggling with this error for the past few days, I followed all of the instruction on the installation page for both Android and IOS platforms but when I compile my project on the simulator it prompts this error. I would really appreciate that if you could help me resolve it.

The erro on simulator

Can't find variable: MapboxGL
<unknown>
    index.delta?platform=android&dev=true&minify=false:187307:11
loadModuleImplementation
    index.delta?platform=android&dev=true&minify=false:276:14
<unknown>
    index.delta?platform=android&dev=true&minify=false:98337:48
loadModuleImplementation
    index.delta?platform=android&dev=true&minify=false:276:14
<unknown>
    index.delta?platform=android&dev=true&minify=false:1383:48
loadModuleImplementation
    index.delta?platform=android&dev=true&minify=false:276:14
guardedLoadModule
    index.delta?platform=android&dev=true&minify=false:152:47
global code
    index.delta?platform=android&dev=true&minify=false:193695:4

Map component inside of the project

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

MapboxGL.setAccessToken(MyToken);

const style = 
{
    viewStyle :
    {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#db0139'
    },
    logoStyle:
    {
        alignSelf: 'center',
        top: '25%',
        fontSize: 60,
        color: '#fff',
        fontWeight: '700'
    },
    containerStyle:
    {
        flex: 1,
    }
};

class Map extends Component
{

    static navigationOptions = 
    {
        header: null,
    };

    render()
    {
        return (
            <View style={style.viewStyle}>

                <Text style={style.logoStyle}>Company Name</Text>
                <View style={styles.containerStyle}>
                    <Mapbox.MapView
                        styleURL = {Mapbox.StyleURL.Street}
                        zoomLevel = {15}
                        centerCoordinate = {[11.256, 43.77]}
                        style = {styles.containerStyle}
                    />
                </View>
            </View>
        );
    }
}

export default Map;

Root Build.gradle

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "28.0.0"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.1'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven { url "https://jitpack.io" }
        maven { url "https://maven.google.com" }
    }
}

Settings.gradle file

rootProject.name = 'Company Name'
include ':@react-native-community_geolocation'
project(':@react-native-community_geolocation').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/geolocation/android')
include ':rn-fetch-blob'
project(':rn-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/rn-fetch-blob/android')
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
include ':mapbox-react-native-mapbox-gl'
project(':mapbox-react-native-mapbox-gl').projectDir = new File(rootProject.projectDir, '../node_modules/@mapbox/react-native-mapbox-gl/android/rctmgl')
include ':app'

App Build.gradle file

project.ext.react = [
    entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"
def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion rootProject.ext.compileSdkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    defaultConfig {
        applicationId "com.flairr"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

AndroidManifest.xml file

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.Company Name">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-feature android:name="android.hardware.camera" android:required="false"/>
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false"/>

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
     <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
     <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Package.json file

{
  "name": "Company Name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@mapbox/react-native-mapbox-gl": "https://github.com/nitaliano/react-native-mapbox-gl/tarball/master",
    "@react-native-community/geolocation": "^1.4.0",
    "axios": "^0.18.0",
    "firebase": "^5.11.0",
    "geofire": "^5.0.1",
    "react": "16.8.3",
    "react-native": "^0.59.6",
    "react-native-gesture-handler": "^1.2.1",
    "react-native-image-picker": "^0.27.0",
    "react-navigation": "^3.9.1",
    "react-redux": "^7.0.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "rn-fetch-blob": "^0.10.15"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/runtime": "^7.4.4",
    "@react-native-community/eslint-config": "^0.0.3",
    "babel-jest": "^24.7.1",
    "eslint": "^5.15.3",
    "jest": "^24.7.1",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

MainApplication.java file

package com.Company Name;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.reactnativecommunity.geolocation.GeolocationPackage;
import com.RNFetchBlob.RNFetchBlobPackage;
import com.imagepicker.ImagePickerPackage;
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.mapbox.rctmgl.RCTMGLPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new GeolocationPackage(),
            new RNFetchBlobPackage(),
            new ImagePickerPackage(),
            new RNGestureHandlerPackage(),
            new RCTMGLPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

Please let me know if there is further information required

[ferdicus]

Hey @MaryamMoghadam, as far as I can tell from glancing over your ticket it seems to be this:

import Mapbox from '@mapbox/react-native-mapbox-gl';
MapboxGL.setAccessToken(<YOUR_TOKEN>);

You're importing MapboxGL as Mapbox however you're calling setAccessToken on MapboxGL. Makes sense?

---

Additional notes on your bug submission

Feel free to ignore them, however it will help you on future issue tickets,
either here or on other repos on github or elsewhere.

• please make sure to properly format your pasted code: As is, the code within the issue ticket is either formatted or not. make sure to use the 3 backticks to start your codeblock and to close it.

• make sure to not paste any sensitive data: you posted your personal mapbox accesstoken within the ticket

hope this helps

[MaryamTaeb]

Hi @ferdicus, thank you for your reply. I Understood my mistake and I think I fixed it by importing mapboxGL as you can see in the code below.

import React, { Component } from 'react';
import {View, Text} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';
MapboxGL.setAccessToken(MyToken);
const style = 
{
    viewStyle :
    {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#db0139'
    },
    logoStyle:
    {
        alignSelf: 'center',
        top: '25%',
        fontSize: 60,
        color: '#fff',
        fontWeight: '700'
    },
    containerStyle:
    {
        flex: 1,
    }
};
class Map extends Component
{
    static navigationOptions = 
    {
        header: null,
    };
    render()
    {
        return (
            <View style={style.viewStyle}>

                <Text style={style.logoStyle}>Comapny Name</Text>
                <View style={styles.containerStyle}>
                <MapboxGL.MapView
                ref={(c) => this._map = c}
                style={{flex: 1}}
                zoomLevel={15}>
                </MapboxGL.MapView>
                </View>
            </View>
        );
    }
}
export default Map;

But I'm receiving a new error:

Can't find variable: pk
<unknown>
    index.delta?platform=android&dev=true&minify=false:187307:49
loadModuleImplementation
    index.delta?platform=android&dev=true&minify=false:276:14
<unknown>
    index.delta?platform=android&dev=true&minify=false:98337:48
loadModuleImplementation
    index.delta?platform=android&dev=true&minify=false:276:14
<unknown>
    index.delta?platform=android&dev=true&minify=false:1383:48
loadModuleImplementation
    index.delta?platform=android&dev=true&minify=false:276:14
guardedLoadModule
    index.delta?platform=android&dev=true&minify=false:152:47
global code
    index.delta?platform=android&dev=true&minify=false:193701:4

[sfratini]

That seems to be an error in your code outside of the repo. I'd disable the Delta feature (I find it to be buggy) in the Development Menu in React Native and try again. Also PK is a usual variable name for prmary key.

[ferdicus]

@MaryamMoghadam, I agree with @sfratini, seems to be something outside the scope of this lib.

Does it build without the mapbox dependency?