Node-Typscript-React PWA with geolocation functionality not starting on AWS ec2

Question

Similarly to the problem described in this post I am having issues with starting my Node-Typscript-React PWA with geolocation feature on an AWS instance while it works perfectly on my local machine.

Details: I've build a PWA from the cra-template-pwa-typescript npx template. I pulled it into my AWS ec2 machine, registered a domain, created necessary A-Records, setup nginx (see config below), and obtained and installed an ssl certificate using certbot. This builds and runs perfectly fine and is accessible via https://www.myapp.com, so far so good.

nginx default config:

server {
  server_name myapp.com www.myapp.com;
  location / {
    proxy_pass http://localhost:3000; # App's port
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

  listen [::]:443 ssl ipv6only=on; # managed by Certbot
  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/myapp.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/myapp.com/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
  if ($host = www.myapp.com) {
    return 301 https://$host$request_uri;
  } # managed by Certbot


  if ($host = myapp.com) {
    return 301 https://$host$request_uri;
  } # managed by Certbot


  listen 80 default_server;
  listen [::]:80 default_server;

  server_name myapp.com www.myapp.com;
  return 404; # managed by Certbot
}

Now, once I add a geolocation feature to the app (see App.tsx and Location.tsx below) it doesn't build (npm run build) anymore. Starting it in dev mode (npm start) takes ages, but eventually (after ~3min) confirms the startup (or sometimes not at all). Any way, the app is not accessible via its domain. Locally, it still runs like perfectly fine.

App.tsx:

import React, {lazy, Suspense} from 'react';
import './App.css';

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const Home = lazy(() => import('./components/Home'));
const Location = lazy(() => import('./components/Location'));

const App: React.FC = () => (
    <Router>
      <Suspense fallback={<div>Page is Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/home" element={<Home />} />
          <Route path="/location" element={<Location />} />
        </Routes>
      </Suspense>
    </Router>
);

export default App;

Location.tsx:

import React, { useState, useCallback, useEffect } from "react";
import logo from "./images/truck512.png";
import { Button } from '@mui/material';

interface Pos {
  longitude: number | null,
  latitude: number | null
}

const Location: React.FC = () => {
  const [pos, setPos] = useState<Pos>({
    latitude: null,
    longitude: null,
  });

  const getLocation = useCallback(() => {
    getGeolocation().then((result) => {
      setPos(result);
    });
  }, []);

  useEffect(() => {
    getGeolocation().then((result) => {
      setPos(result);
    });
  }, []);

  return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>Your current geolocation is: {pos.longitude}:{pos.latitude}</p>
          <p>To reload your location click <Button onClick={getLocation}>here</Button>.</p>
        </header>
      </div>
  )
}

const getGeolocation = (): Promise<Pos> => {
  return new Promise((resolve) => {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(
          (position) => {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            resolve({ latitude, longitude });
          },
          (error) => {
            console.error('Error getting location:', error.message);
            resolve({ latitude: null, longitude: null });
          }
      );
    } else {
      console.error('Geolocation is not available in this browser.');
      resolve({ latitude: null, longitude: null });
    }
  });
};

export default Location;

Having successfully tested for internet connection (curl -L http://www.google.com) and setup https/http as suggested in the referenced post, I am out of my depth here - any help is highly appreciated!