地图仅在本地主机中呈现 - 在应用程序构建过程后不显示

Question

我正在开发一个 React 应用程序，它有两个地图（一个传单+ESRI 地图，另一个是 Maptiler）。我已经获得了两者的 API 密钥，并且它在本地主机环境中正确呈现。

但是，当我构建并发布网站时，地图并未渲染。

网络选项卡看起来不错 - 没有 CORS 问题或失败的请求。可以看到地图数据的请求是200 OK，返回的地图的JSON数据是正确的。

控制台出现错误，

"Uncaught ReferenceError: g is not defined"

，这对调试问题没有多大帮助。

我使用过各种其他库（包括图表库），一切似乎都工作正常。问题仅在于渲染贴图。

例如，以下是我尝试在 React 中渲染 Maptiler 地图的方法。 React-传单也发生同样的情况。

import Map, {  NavigationControl } from "react-map-gl";
import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

const App = () => {
return (
<div>
        <Map
          mapLib={maplibregl}
          initialViewState={{
            longitude: 0,
            latitude: 0,
            zoom: 2,
          }}
          style={{ width: "80vw", height: "90vh" }}
          mapStyle="https://api.maptiler.com/maps/streets/style.json?key=API_KEY"
        >
          <NavigationControl position="top-left" />
        </Map>
      </div>
);
}

这是我的

package.json

脚本：

"scripts": {
    "prestart": "node aspnetcore-https && node aspnetcore-react",
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"  
    },

版本：

{
     "maplibre-gl": "^3.1.0",
     "react-map-gl": "^7.0.25",
     "esri-leaflet": "^3.0.10",
     "esri-leaflet-vector": "^4.1.0",
     "react-leaflet": "^4.2.1",
}

有什么想法可能会发生这种情况吗？谢谢！

Answer 1

我刚刚为自己解决了类似的问题。我收到的错误是：

Uncaught ReferenceError: y is not defined

。

我正在处理 React 和 Vercel 中另一个应用程序的开发/产品问题，该问题通过更改 package.json 中的浏览器列表来修复。这个其他应用程序也使用了 Maplibre-gl 和 Maptiler，在生产中渲染得很好。

我找不到原始的 StatckOverflow 答案，但这是我的解决方案

package.json

"browserslist": {
"production": [
  "defaults",
  "not ie 11"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]
}

我不知道为什么会这样，也许其他人可以回答。