component shows blank screen

Question

I was following lama dev youtube channel's video for using mapbox in reactjs. But when I run the reactjs script, my map component is empty.

video: https://youtu.be/9oEQvI7K-rA

source code: https://github.com/safak/youtube/tree/mern-travel-app

my code

import * as React from 'react';
import { useState } from 'react';
import ReactMapGL from 'react-map-gl';

function App() {

  const [viewport, setViewport] = useState({
    width: "100vw",
    height: "100vh",
    latitude: 46,
    longitude: 17,
    zoom: 8,
  });


  return (
    <div className="App">
      <ReactMapGL
      {...viewport} 
      mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX} 
      onViewportChange={nextViewport => setViewport(nextViewport)} 
    />
    </div>
  );
}

export default App;

I followed the coding and in the react part, I created the .env file, installed and imported react-map-gl and used the . For some reason I see only blank screen instead of a map. I tried the example code from the uber library visgl.github.io, also the source code that you have provided, still the screen was blank.

followed these solutions:

Mapbox blank map React-map-gl | ReactJS react-map-gl: Map Does Not Appear Map not showing up when using react-map-gl and create-react-app

but still the Component is empty.

Any help would be useful, thanks!

EDIT 1: I found this error in the firefox console:

An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

Answer 1

After the comment from J-007, I added these lines below the previous import lines:

import mapboxgl from 'mapbox-gl'; 


mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

and the map is working fine now.

EDIT: This worked only in one project- https://codesandbox.io/s/react-test-ivbkv?file=/src/App.js then it didn't work in the example provided in http://visgl.github.io/react-map-gl/docs/get-started/get-started

Then I found - https://medium.com/geekculture/building-an-interactive-map-with-mapbox-react-f335384f4863:

and using npx create-react-app projectname exactly as mentioned in this article, i find the map working even in http://visgl.github.io/react-map-gl/docs/get-started/get-started script.

EDIT 2: Copy pasting code from the Medium article (just in case) -

npx create-react-app mapbox-project
cd mapbox-project
npm i react-map-gl react-map-gl-geocoder
npm start

import React, { Component } from 'react';
import ReactMapGl from 'react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css';

const mapboxToken = 'YOUR API KEY'

class Map extends Component {
  constructor() {
    super()
    this.state = {
      viewport: {
        width: '100vw',
        height: '100vh',
        latitude: 40.78343,
        longitude: -73.96625,
        zoom: 11
      }
    }
    this.handleViewportChange = this.handleViewportChange.bind(this)
  }
  handleViewportChange(viewport) {
    this.setState(prevState => ({
      viewport: {...prevState.viewport, ...viewport}
    }))
  }
  render() {
    return (
      <ReactMapGl
        {...this.state.viewport}
        onViewportChange={viewport => this.setState({viewport})}
        mapboxApiAccessToken={mapboxToken}
        mapStyle="mapbox://styles/mapbox/streets-v10"
      />
    )
  }
}

export default Map;

Answer 2

What worked for me, was from this page: http://visgl.github.io/react-map-gl/docs/get-started/get-started

npm install --save react-map-gl mapbox-gl

whereas, I believe the tutorial was just react-map-gl