第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

墨色風(fēng)雨 2024-01-18 14:39:08
我正在使用react 17.0.1和react-map-gl ^6.0.2我有一個地圖組件。我嘗試過其他庫,問題仍然存在我已經(jīng)聯(lián)系了 Mapbox 的支持人員我已經(jīng)聯(lián)系了其他mapbox用戶無法解決這個問題當(dāng)我執(zhí)行“npm run start”時沒問題,它顯示地圖,但是當(dāng)我執(zhí)行“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
查看完整描述

7 回答

?
海綿寶寶撒

TA貢獻1809條經(jīng)驗 獲得超8個贊

我知道這是一個舊帖子..

據(jù)我了解,原因是 mapbox (不是react-map-gl)有一個錯誤,無法使用“npm build”正確轉(zhuǎn)換。

幸運的是,正如我在此鏈接中了解到的那樣,您不必彈出您的應(yīng)用程序: 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”。


查看完整回答
反對 回復(fù) 2024-01-18
?
呼如林

TA貢獻1798條經(jīng)驗 獲得超3個贊

該問題是由轉(zhuǎn)譯器引起的。這是 Mapbox 正在解決的一個錯誤。請遵循此處的建議:

https://github.com/mapbox/mapbox-gl-js/issues/10173

現(xiàn)在它也出現(xiàn)在官方文檔中。

https://docs.mapbox.com/mapbox-gl-js/api/#transpiling-v2


查看完整回答
反對 回復(fù) 2024-01-18
?
慕村9548890

TA貢獻1884條經(jīng)驗 獲得超4個贊

埋在此處發(fā)布的幾個鏈接中的是這為我解決了問題。它修復(fù)了導(dǎo)致問題的 Mapbox 轉(zhuǎn)譯器錯誤。


// @ts-ignore

// eslint-disable-next-line import/no-webpack-loader-syntax

import mapboxgl from '!mapbox-gl';


查看完整回答
反對 回復(fù) 2024-01-18
?
楊__羊羊

TA貢獻1943條經(jīng)驗 獲得超7個贊

僅將寬度和高度設(shè)為數(shù)字


const[viewport, setViewport] = useState({

    width: "100",

    height: "400",

    latitude: 38.963745,

    longitude: 35.243322,

    zoom: 5

});


查看完整回答
反對 回復(fù) 2024-01-18
?
四季花海

TA貢獻1811條經(jīng)驗 獲得超5個贊

當(dāng)嘗試部署應(yīng)用程序時,首先我們運行yarn build。這似乎完成了它的工作,沒有構(gòu)建錯誤。然而,當(dāng)我們實際部署它時,例如為構(gòu)建提供服務(wù)。我們遇到了“referenceError:y 未定義”。

將Mapbox-gl版本降級到1.13.0時。構(gòu)建工作得很好。這是我們在問題解決之前必須要做的事情。

以下步驟:

  • 運行yarn install或npm install

  • 運行yarn build或npm build


查看完整回答
反對 回復(fù) 2024-01-18
?
拉莫斯之舞

TA貢獻1820條經(jīng)驗 獲得超10個贊

將以下內(nèi)容添加到 package.json 對我有用:


"browserslist": {

    "production": [

        ">0.2%",

        "not dead",

        "not ie 11",

        "not chrome < 51",

        "not safari < 10",

        "not android < 51"

    ],

    "development": [

        "last 1 chrome version",

        "last 1 firefox version",

        "last 1 safari version"

    ]

},


查看完整回答
反對 回復(fù) 2024-01-18
?
慕斯王

TA貢獻1864條經(jīng)驗 獲得超2個贊

此問題的解決方案對我有用,無需更改瀏覽器列表:


在 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"


查看完整回答
反對 回復(fù) 2024-01-18
  • 7 回答
  • 0 關(guān)注
  • 418 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號