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

Question

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

1. 我尝试过其他库，问题仍然存在

2. 我已经联系了 Mapbox 的支持人员

3. 我已经联系了其他mapbox用户

无法解决这个问题

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

它抛出这个错误：错误

我的代码如下：

  import React, {useState } from "react";

import ReactMapGL from 'react-map-gl';

const Map = () => {

  const[viewport, setViewport] = useState({

    width: "100%",

    height: "400px",

    latitude: 38.963745,

    longitude: 35.243322,

    zoom: 5

  });

     return (

    <div>

      <h2>Size yakın olan yerleri keşfedin!</h2>

            <ReactMapGL

                 {...viewport}

              onViewportChange={setViewport}

              mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}

              mapStyle="mapbox://styles/mapbox/streets-v11"

           />

          </div>

           );

        }

     export default Map

Answer 1

我知道这是一个旧帖子..据我了解，原因是 mapbox （不是react-map-gl）有一个错误，无法使用“npm build”正确转换。幸运的是，正如我在此链接中了解到的那样，您不必弹出您的应用程序：&nbsp;https://github.com/mapbox/mapbox-gl-js/issues/10173#issuecomment-753662795我不得不npm install worker-loader然后添加以下行。&nbsp; &nbsp; // had this.&nbsp; &nbsp; import ReactMapGL, { FlyToInterpolator, NavigationControl } from 'react-map-gl';&nbsp; &nbsp; import 'mapbox-gl/dist/mapbox-gl.css';&nbsp; &nbsp; // added the following 6 lines.&nbsp; &nbsp; import mapboxgl from 'mapbox-gl';&nbsp; &nbsp; // The following is required to stop "npm build" from transpiling mapbox code.&nbsp; &nbsp; // notice the exclamation point in the import.&nbsp; &nbsp; // @ts-ignore&nbsp; &nbsp; // eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved&nbsp; &nbsp; 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

该问题是由转译器引起的。这是 Mapbox 正在解决的一个错误。请遵循此处的建议：https://github.com/mapbox/mapbox-gl-js/issues/10173现在它也出现在官方文档中。https://docs.mapbox.com/mapbox-gl-js/api/#transpiling-v2

Answer 3

埋在此处发布的几个链接中的是这为我解决了问题。它修复了导致问题的 Mapbox 转译器错误。// @ts-ignore// eslint-disable-next-line import/no-webpack-loader-syntaximport mapboxgl from '!mapbox-gl';

Answer 4

仅将宽度和高度设为数字const[viewport, setViewport] = useState({&nbsp; &nbsp; width: "100",&nbsp; &nbsp; height: "400",&nbsp; &nbsp; latitude: 38.963745,&nbsp; &nbsp; longitude: 35.243322,&nbsp; &nbsp; zoom: 5});

Answer 5

当尝试部署应用程序时，首先我们运行yarn build。这似乎完成了它的工作，没有构建错误。然而，当我们实际部署它时，例如为构建提供服务。我们遇到了“referenceError：y 未定义”。将Mapbox-gl版本降级到1.13.0时。构建工作得很好。这是我们在问题解决之前必须要做的事情。以下步骤：运行yarn&nbsp;install或npm&nbsp;install运行yarn&nbsp;build或npm&nbsp;build

Answer 6

将以下内容添加到 package.json 对我有用："browserslist": {&nbsp; &nbsp; "production": [&nbsp; &nbsp; &nbsp; &nbsp; ">0.2%",&nbsp; &nbsp; &nbsp; &nbsp; "not dead",&nbsp; &nbsp; &nbsp; &nbsp; "not ie 11",&nbsp; &nbsp; &nbsp; &nbsp; "not chrome < 51",&nbsp; &nbsp; &nbsp; &nbsp; "not safari < 10",&nbsp; &nbsp; &nbsp; &nbsp; "not android < 51"&nbsp; &nbsp; ],&nbsp; &nbsp; "development": [&nbsp; &nbsp; &nbsp; &nbsp; "last 1 chrome version",&nbsp; &nbsp; &nbsp; &nbsp; "last 1 firefox version",&nbsp; &nbsp; &nbsp; &nbsp; "last 1 safari version"&nbsp; &nbsp; ]},

Answer 7

此问题的解决方案对我有用，无需更改浏览器列表：在 Map.js 组件中：import { workerClass } from 'mapbox-gl';import workerLoader from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker';workerClass = workerLoader;在 eslintrc 中："import/no-webpack-loader-syntax": "off","import/no-unresolved": "off"