本地PMTiles地图主窗口不显示但Firefox开发者工具可预览求助

我按照Protomaps方案制作并发布矢量瓦片，使用官方的MapLibre示例测试成功，生成了正常显示的地图（样式粗糙但流程可行）：

随后尝试本地部署同一PMTiles文件，不依赖在线库和样式表，但项目无法正常运行。奇怪的是，Firefox开发者工具中hover地图div时能看到地图预览，但主窗口无任何内容：

项目代码如下：

main.js文件 #

import 'maplibre-gl/dist/maplibre-gl.css'
import maplibregl from 'maplibre-gl'

import * as pmtiles from 'pmtiles'

let protocol = new pmtiles.Protocol()
maplibregl.addProtocol("pmtiles",protocol.tile)

let PMTILES_URL = "http://localhost:80/taranto.pmtiles";

const p = new pmtiles.PMTiles(PMTILES_URL);

protocol.add(p);

p.getHeader().then(h => {
    const map = new maplibregl.Map({
    container: 'map',
    zoom: h.maxZoom-2,
    center: [h.centerLon, h.centerLat],
    style: {
            version:8,
            sources: {
                      "example_source": {
                          type: "vector",
                          url: "pmtiles://" + PMTILES_URL,
                          attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
                          }
                     },
            layers: [
                        {
                         "id":"landuse",
                         "source": "example_source",
                         "source-layer":"landuse",
                         "type": "fill",
                         "paint": {
                                   "fill-color": "steelblue"
                                  }
                      },
                        {
                         "id":"transportation",
                         "source": "example_source",
                         "source-layer":"transportation",
                         "type": "line",
                         "paint": {
                                   "line-color": "black"
                                  }
                      },
                        {
                         "id":"mask",
                         "source": "example_source",
                         "source-layer":"mask",
                         "type": "fill",
                         "paint": {
                                   "fill-color": "white"
                                  }
                      }
                    ]
                   }
                });
                map.showTileBoundaries = true;
            })

index.html文件 #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <title>Maplibre App</title>
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

恳请帮忙排查该问题，感谢！

内容的提问来源于stack exchange，提问作者user1632812