<ReactMapGL/> component shows blank screen - reactjs

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