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”。

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

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';

TA貢獻1943條經(jīng)驗 獲得超7個贊
僅將寬度和高度設(shè)為數(shù)字
const[viewport, setViewport] = useState({
width: "100",
height: "400",
latitude: 38.963745,
longitude: 35.243322,
zoom: 5
});

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

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"
]
},

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"
添加回答
舉報