Mapbox 空白地图 React-map-gl | Mapbox 空白地图 ReactJS

Question

我正在使用react 17.0.1和react-map-gl ^6.0.2我有一个地图组件。

\n

\n
1. 我尝试过其他库，问题仍然存在
\n
2. 我已经联系了 Mapbox 的支持人员
\n
3. 我已经联系了其他mapbox用户
\n

\n

无法解决这个问题

\n

当我执行“npm run start”时没问题，它显示地图，但是当我执行“npm run build”时，它只显示：地图空白

\n

它抛出这个错误：错误

\n

我的代码如下：

\n

   import React, {useState } from "react";\nimport ReactMapGL from \'react-map-gl\';\nconst Map = () => {\n  const[viewport, setViewport] = useState({\n    width: "100%",\n    height: "400px",\n    latitude: 38.963745,\n    longitude: 35.243322,\n    zoom: 5\n  });\n     return (\n    <div>\n      <h2>Size yak\xc4\xb1n olan yerleri ke\xc5\x9ffedin!</h2>\n            <ReactMapGL\n                 {...viewport}\n              onViewportChange={setViewport}\n              mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}\n              mapStyle="mapbox://styles/mapbox/streets-v11"\n           />\n          </div>\n           );\n        }\n     export default Map\n

\n

Answer 1

我知道这是一个旧帖子..

据我了解，原因是 mapbox （不是react-map-gl）有一个错误，无法使用“npm build”正确转换。

幸运的是，正如我在此链接中了解到的那样，您不必弹出您的应用程序： https://github.com/mapbox/mapbox-gl-js/issues/10173#issuecomment-753662795

我不得不npm install worker-loader

然后添加以下行。

    // had this.
    import ReactMapGL, { FlyToInterpolator, NavigationControl } from 'react-map-gl';    import 'mapbox-gl/dist/mapbox-gl.css';


    // added the following 6 lines.
    import mapboxgl from 'mapbox-gl';

    // The following is required to stop "npm build" from transpiling mapbox code.
    // notice the exclamation point in the import.
    // @ts-ignore
    // eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
    mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

由于我使用的是打字稿和 linting，我必须添加一些指令来忽略警告/错误，否则会阻止它编译。

请注意，我不必安装，mapboxgl因为react-map-gl使用它。

但是，我确实需要添加eslint-disable-next-line import/no-unresolved

并eslint-disable-next-line import/no-webpack-loader-syntax 合并在同一条线上。

我正在使用“react-map-gl”：“^6.1.17”。

Answer 2

当尝试部署应用程序时，首先我们运行yarn build。这似乎完成了它的工作，没有构建错误。然而，当我们实际部署它时，例如为构建提供服务。我们遇到了“referenceError：y 未定义”。

将Mapbox-gl版本降级到1.13.0时。构建工作得很好。这是我们在问题解决之前必须要做的事情。

以下步骤：

• 运行yarn install或npm install
• 运行yarn build或npm build