We Keep Coding

Error: An API access token is required to use Mapbox GL

I am using react-gl library to use the map-api using mapbox. I have created an account mapbox as well still it is showing the error depicted in the picture.
Here is my code for app.js
import * as React from 'react';
import Map from 'react-map-gl';
function App() {
return (
<Map
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX}
style={{width: 600, height: 400}}
mapStyle="mapbox://styles/mapbox/streets-v9"
/>
);
}
export default App
Here is the error:

I faced the same problem. You must to change mapboxApiAccessToken to mapboxAccessToken.

Big shout out to Dani Pérez. Apparently his answer is correct. Just to add on to his answer, in react-map-gl v7.0, they decided to rename various props and one of those props is mapboxApiAccessToken
Renamed props for better consistency with the wrapped library:
mapboxApiAccessToken is now mapboxAccessToken
This is mentioned in their Upgrade guide:
https://visgl.github.io/react-map-gl/docs/upgrade-guide

React Native says files don't exist

So, I'm new to React Native, and I'm trying to build out a basic app, but every time I launch it on my android emulator, I get a syntax error telling me that 'none of these files exist" and it is referring to an image. Here is a screen capture of the emulator, as well as my vs code workspace.
Here is the code if anyone wants to copy it and mess with it.
WelcomeWindow.js:
import React from 'react';
import { ImageBackground } from 'react-native-web';
function WelcomeWindow(props) {
return (
<ImageBackground
style={styles.background}
source={require("../assets/background.jpg")}>
</ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
}
})
export default WelcomeWindow;
App.js:
import WelcomeWindow from './app/screen/WelcomeWindow';
export default function App() {
return (
<WelcomeWindow />
);
}
I'm certain the path is correct, I'm thinking this is more of a bug somewhere, and I don't really know how to fix it. I've tried looking for a solution, and I've come across a sources saying this is specifically an issue when using android studio, which I am using. Again, I'm not sure about that. If anyone can help me out, it would be greatly appreciated!

I figured out what was going on. For some reason, the automatic import for ImageBackground is from react-native-web.
import React from 'react';
import { ImageBackground } from 'react-native-web';
It should only be react-native.
import React from 'react';
import { ImageBackground } from 'react-native';

Map not showing up when using react-map-gl and create-react-app

I am using create react app, along with react-map-gl. I just need the map to show up on the screen right now but all it does is show the mapbox logo and have a blank space where the map should be.
Here is my main .js file:
import './App.css';
import ReactMapGL from 'react-map-gl';
import React, {useState} from 'react';
function App() {
const [viewport, setViewport] = useState({
width: 400,
height: 400,
latitude: 38.958630,
longitude: -77.357002,
zoom: 10
});
return (
<div className="TextStuff">
<ReactMapGL {...viewport}
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}>MAPPPPP</ReactMapGL>
</div>
);
}
export default App;

After investigating, I came to the conclusion that your token is not properly passed to your component, through the process.env. I created a reproducible example, with a working token, and it is working like a charm. I am getting the same result as you when providing an invalid token.
So I guess that you are getting and undefined token, or something like this.
Following this tutorial, you should have an .env file, where you store your token like this:
REACT_APP_MAPBOX_TOKEN=MYTOKEN
Try to log out your process.env.REACT_APP_MAPBOX_TOKEN, to see what you are getting.
But what I suspect, is that you put the .env file in your src folder. But you shouldn't put it there. Instead, put it at the root of your project, and then restart your server. This way, you should get your token correctly.

importing react-leaflet in react with webpack returns error

I am trying to simply import react-leaflet without rendering any maps in my project but it gives me this error.
TypeError: Object(...) is not a function
I know for sure it's from the import statement. It even points to it in the error on line 2. Here is my code.
import React from 'react'
import { Map } from 'react-leaflet'
export default class MyMap extends React.Component {
constructor() {
super()
this.state = {
lat: 51.505,
lng: -0.09,
zoom: 13
}
}
render() {
return (
<div><h1>E</h1></div>
);
}
}
Code works fine without the import statement. What am I doing wrong here?

Looking at the react-leaflet website (https://react-leaflet.js.org/) it looks like the Map component is a named export. When importing named exports you need to wrap the component you're importing with curly braces:
import { Map } from 'react-leaflet';
Some information on named and default exports here
I haven't used react-leaflet myself but looking over their website it seems they have some good examples to help get you started. It may be worth taking a look if you're new to it.

Invalid Element Type with reactJS and google map

I am currently encountering this error while using reactJS with google-map-react. I followed the example from here
The error is:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of MyComponent
Below is the content of MyComponent.tsx.
Import statement:
import GoogleMapReact from 'google-map-react';
States for the map
state = {
center: [ 49.872768, 8.651180 ],
zoom: 14
};
and the render() method
render() {
return (
<div>
<div>WorldMap</div>
<div style={{ width:"100%", height: 400 }}>
<GoogleMapReact center={this.state.center} zoom={this.state.zoom}>
</GoogleMapReact>
</div>
...
</div>
);
}
It is the bare minimum of the required stuff for showing google map, but I can't seem to find out where the error is
Any help is appreciated. Thanks before
EDIT
I forgot to add a bit more details. I am using requireJS for getting reference to the module. Below is the config
requirejs.config({
baseUrl: './out',
paths: {...,
'google-map-react': '../node_modules/google-map-react/dist/GoogleMapReact.min'
}
});
I checked the path and it points to the correct js file (GoogleMapReact.min.js).
Strangely, in my .tsx file, I encountered a semantic error (Visual Studio Code) which states that it cannot find the module 'google-map-react' from the import above
error TS2307: Cannot find module 'google-map-react'

I think its because you are Importing GoogleMapReact wrongly. This was the case for me atleast.
Try:
import GoogleMapReact from 'google-map-react';
instead of
import {GoogleMapReact} from 'google-map-react';
Because of this its not able to recognize GoogleMapReact as a component.

Importing without brackets works if what you are importing is the default export from where it is exported, importing with brackets imports a named export. In your case GoogleMapsReact is the default export from where it is exported and therefore should be imported without brackets. see related question:
https://stackoverflow.com/a/36796281/5718714
another thing you can try is to change
from 'google-map-react'; to 'from 'google-maps-react'; as the package name seems to be google-maps-react.
assuming the package you are using is https://github.com/istarkov/google-map-react. I had no problem using your code, with the slight modification that i am using a local variable for state in render() instead of state. This example is based off of the create-react-app project.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import GoogleMapReact from 'google-map-react';
class App extends Component {
render() {
let state = {
center: [ 49.872768, 8.651180 ],
zoom: 14
};
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div>
<div>WorldMap</div>
<div style={{ width:"100%", height: 400 }}>
<GoogleMapReact center={state.center} zoom={state.zoom}>
</GoogleMapReact>
</div>
</div>
</div>
);
}
}
export default App;
Looking at the docs for require js http://requirejs.org/docs/api.html, it states that pathsshould not point to a single js file but rather a dir, maybe try with the dist folder under google-map-react ?
from docs:
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: 'js/lib',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//never includes a ".js" extension since
//the paths config could be for a directory.
paths: {
app: '../app'
}
});
// Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
function ($, canvas, sub) {
//jQuery, canvas and the app/sub module are all
//loaded and can be used here now.
});