Fix places CSS load error

ui/build.mjs

@@ -26,7 +26,8 @@ const defineEnv = ENVIRONMENT_VARIABLES.reduce((acc, key) => {
 }, {})
 
 const esbuildOptions = {
-  entryPoints: ['src/index.tsx'],
+  entryPoints: ['src/index.tsx', 'mapbox-gl/dist/mapbox-gl.css'],
+  entryNames: '[name]',
   plugins: [
     babel({
       filter: /photoview\/ui\/src\/.*\.(js|tsx?)$/,
@@ -51,6 +52,13 @@ const esbuildOptions = {
   },
   define: defineEnv,
   incremental: watchMode,
+  watch: {
+    onRebuild(err) {
+      if (err == null) {
+        bs.reload()
+      }
+    },
+  },
 }
 
 fs.emptyDirSync('dist/')
@@ -60,7 +68,7 @@ fs.copyFileSync('src/favicon.ico', 'dist/favicon.ico')
 fs.copySync('src/assets/', 'dist/assets/')
 
 if (watchMode) {
-  let builderPromise = esbuild.build(esbuildOptions)
+  esbuild.build(esbuildOptions)
 
   bs.init({
     server: {
@@ -70,12 +78,6 @@ if (watchMode) {
     port: 1234,
     open: false,
   })
-
-  bs.watch('src/**/*.@(js|tsx|ts)').on('change', async args => {
-    console.log('reloading', args)
-    builderPromise = (await builderPromise).rebuild()
-    // bs.reload(args)
-  })
 } else {
   const build = async () => {
     await esbuild.build(esbuildOptions)

ui/src/Pages/PlacesPage/PlacesPage.tsx

@@ -7,9 +7,6 @@ import styled from 'styled-components'
 import Layout from '../../Layout'
 import { makeUpdateMarkers } from './mapboxHelperFunctions'
 import MapPresentMarker from './MapPresentMarker'
-
-// Will be bundled to dist/src/Pages/PlacesPage/PlacesPage.css
-import 'mapbox-gl/dist/mapbox-gl.css'
 import { urlPresentModeSetupHook } from '../../components/photoGallery/photoGalleryReducer'
 import { placesReducer } from './placesReducer'
 
@@ -148,7 +145,7 @@ const MapPage = () => {
   return (
     <Layout title="Places">
       <Helmet>
-        <link rel="stylesheet" href="/src/Pages/PlacesPage/PlacesPage.css" />
+        <link rel="stylesheet" href="/mapbox-gl.css" />
       </Helmet>
       <MapWrapper>
         <MapContainer ref={mapContainer}></MapContainer>