We Keep Coding

react-map-gl MAP component not sending over access_token

I'm trying to get a map to display using this documentation:
https://github.com/visgl/react-map-gl/blob/7.0-release/examples/get-started/basic/app.js
https://visgl.github.io/react-map-gl/docs/get-started/get-started
import * as React from 'react';
import Map, {Marker} from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
const MAPBOX_TOKEN = process.env.NEXT_PUBLIC_MY_MAPBOX_API_TOKEN;
return (
<Map
initialViewState={{
latitude: 41.5801,
longitude: -71.4774,
zoom: 14
}}
style={{width: 800, height: 600}}
mapStyle="mapbox://styles/mapbox/streets-v9"
mapboxAccessToken={MAPBOX_TOKEN}
>
</Map>
);
}
export default App;
I also have a .env.local file with
NEXT_PUBLIC_MY_MAPBOX_API_TOKEN="api_key here"
The map does not display in the browser.
In the browser console, I get an error https://api.mapbox.com/styles/v1/mapbox/streets-v9?access_token=no-token.
So I think for some odd reason, react is not sending over the mapboxAccessToken through the Map component. No idea why.
I'm also going to paste the full console here in case I missed anything:
browser console
I have also tried to paste the api key directly into mapboxAccessToken.
Also tried using REACT_APP_MAPBOX_ACCESS_TOKEN instead.
No luck. This is getting ridiculous and I am starting to think they decommissioned react-map-gl.

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.

Is there a way to import a script package from URL?

I'm using React and I want to use a package which can only retrieved as an URL. In HTML it's easy to import using the script tag, but how to import to a JavaScript file?
What I want is to convert this
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
into something like this
import 'https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true'

Based on your comment when you import it directly in your html:
It throws an error which says that the objects of the script aren't
defined
I think the best approach here is to not try to import the js in another js file, but use the React google maps library instead, so you don't go through these hacks.
Try it and let us know.
The reason for this answer is that, even if you get the script working by adding another js file into your own js file, google maps api js will do more things that will give you trouble and issues in React (like the one you are having right now), and these issues have already been solved by this library.
Have a read at the official documentation to see if it works for you.
Example
There is a good tutorial and very basic example using this library here.
Example of using latitude and longitude (taken from this tutorial):
const GoogleMapExample = withGoogleMap(props => (
<GoogleMap
defaultCenter = { { lat: 40.756795, lng: -73.954298 } }
defaultZoom = { 13 }
>
</GoogleMap>
));
return(
<div>
<GoogleMapExample
containerElement={ <div style={{ height: `500px`, width: '500px' }} /> }
mapElement={ <div style={{ height: `100%` }} /> }
/>
</div>
);
Alternative library
Alternatively, you could use this library, as it is another react library for rendering google maps.
google-map-react
You can also follow this tutorial with this library.
These libraries have plenty of supporters and stars, meaning that you can always count on updates and helpful information.

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.
});